HTML+JS+CSS制作一个自定义音乐播放器

html-css011

HTML+JS+CSS制作一个自定义音乐播放器,第1张

<audio controls name="audio" width="500px" id="jojo" style="display: none">

<source src="mp3文件" type=" audio/mpeg ">

</audio>

http://hi.baidu.com/boy88/blog/item/16083bc7cbe7e9dcd00060c5.html改变你的播放器 黑色

在css 文件的空白处添加以下代码：

#mod_bgmusic{display:none}

不显示播放器，但不影响音乐的播放

<!Doctype html>

<html>

<head>

<meta charset="utf-8">

<title>MUSIC</title>

<style type="text/css">

*{margin:0pxpadding:0px}

#bg{position:absolutetop:0pxleft:0pxbackground:url("./img/bg_1.jpg")background-size:coverheight:100%width:100%overflow:hidden}

#music_icon{position:fixedtop:10pxright:10pxbackground:url("./img/music_icon.png")background-size:coverheight:55pxwidth:55px}

#music_board{height:500pxwidth:400pxbackground:#999margin:10% autoborder-radius:12pxbox-shadow:0px 0px 15px #222display:none}

#music_gif{height:280pxwidth:380pxposition:relativetop:20pxleft:10pxbackground:url("./img/music_5.gif")background-size:cover}

#music_control{text-align: centerposition: relativetop: 50pxcolor: rgb(255, 255, 255)font-size: 1.5em}

#control{margin-top:45pxwidth:100%height:70pxtext-align:center}

</style>

</head>

<body>

<audio id="music" src="./mp3/xinxiangan.mp3" loop="loop"></audio>

<div id="bg">

<div id="music_icon" onclick="show_music_board()"></div>

<div id="music_board">

<div id="music_gif"></div>

<div id="music_control">MUSIC BOARD

<div id="control">

<img  id="control_img" src="./img/pause_button.png" height="60px" onclick="music_control()">

</div>

</div>

</div>

</div>

<script type="text/javascript">

var music = document.getElementById("music")//建立audiod对象

var control_img = document.getElementById("control_img")//建立播放按钮图片对象，为了更好的操作

var music_board = document.getElementById("music_board")//建立music面板的对象，为了更好的操作

var lock = false//设置一个布尔变量，用于判断音乐的播放与暂停

function music_control(){//音乐开始与暂停

if( lock == false){

music.play()

control_img.setAttribute("src", "./img/pause_button.png")

lock = true

}

else{

music.pause()

control_img.setAttribute("src", "./img/play_button.png")

lock = false

}

}

function show_music_board(){//music面板的显现与展示

if( music_board.style.display == "none"){music_board.style.display = "block"

lock = false

music_control()

}

else{

music_board.style.display ="none"

lock = true

music_control()

}

}

</script>

</body>

</html>