您的位置：首页 > Web前端 > HTML5

Html5 audio标签实现音乐播放

2017-05-28 21:59 579 查看 
<!--通过原生js代码，和html5的audio标签实现音乐播放-->
<!DOCTYPE HTML>
<html>
<head>
<style>
*{margin:0;padding:0;}
body{padding:30px;background:#9e9e9e}
header{width:500px;margin:0 auto;text-align:center}
.content{width:510px;overflow-y:auto;margin:0 auto; padding:5px; font-size:24px;box-shadow:10px 10px 5px #888888;background:#a1887f;}
.musicDiv{width:500px;height:50px;margin:0px auto;line-height:50px;cursor:pointer}
.line{width:500px;height:2px;background:white;float:left;margin:5px 0}
.clear{clear:both}
</style>
<script>
var olderBox;//记录前一个播放的音乐位置
var currentBox;
var stateImg;
window.onload = function()
{

var player = document.getElementById("player");
player.addEventListener('pause',function()
{
if(currentBox != null)
stateImg[0].src="pause.png";
},false);
player.addEventListener('playing',function()
{
if(currentBox != null)
stateImg[0].src="play.png";
},false);
}

function play(obj)
{
//alert(obj);
//var box = document.getElementsByName("box");
currentBox = obj;
stateImg = obj.getElementsByTagName("img");
if(olderBox != obj)
{
if(olderBox != null)
{
stateImg1 = olderBox.getElementsByTagName("img");
stateImg1[0].src = "";
}
olderBox = obj;
var box1 = obj.getElementsByTagName("span");

var songName = "music/" + box1[0].innerText+".mp3";
player.src = songName;
player.play();
stateImg[0].src="play.png";
}else
{
if(player.paused)
{
player.play();
stateImg[0].src="play.png";
}
else
{
player.pause();
stateImg[0].src="pause.png";
}
}
}

function changeState()
{
alert("点击");
if(current != null)
{
if(player.paused)
{
stateImg[0].src="pause.png";
}else
{
stateImg[0].src="play.png";
}
}
}

</script>
</head>
<body>
<header><h1>音乐播放列表</h1></header>
<div style="width:510px;height:30px;margin:10px auto;" onclick="changeState()">
<audio id="player"  controls="controls" style="width:510px;"></audio>
</div>

<div id="content" class="content">
<script>
var content = document.getElementById("content");
var clientHeight = document.documentElement.clientHeight-document.documentElement.scrollTop;
content.style.height = clientHeight+'px';
</script>
<div class="musicDiv" style="margin-top:0" name="box" onclick="play(this)">
<div style="width:450px;height:50px;float:left;">
<span name="songName">1.给你们</span><span name="singer"> - 张宇</span>
</div>
<div style="width:50px;height:50px;float:left;text-align:center;">
<img style="vertical-align:middle;">
</div>
<div class="line"></div>
</div>

<div class="musicDiv" name="box" onclick="play(this)">
<div style="width:450px;height:50px;float:left;">
<span>2.Thanks for your love</span><span> - 刘德华</span>
</div>
<div style="width:50px;height:50px;float:left;text-align:center;">
<img style="vertical-align:middle;">
</div>
<div class="line"></div>
</div>

<div class="musicDiv" name="box" onclick="play(this)">
<div style="width:450px;height:50px;float:left;">
<span>3.酒干倘卖无</span><span> - 苏芮</span>
</div>
<div style="width:50px;height:50px;float:left;text-align:center;">
<img style="vertical-align:middle;">
</div>
<div class="line"></div>
</div>
<div class="clear"></div>

</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  audio 音乐 播放器
相关文章推荐
新的分享
章节导航