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

通过html5实现简易的音乐播放器

2013-12-30 20:39 267 查看

<!DOCTYPE
html>
<html>
<head>

<meta charset="utf-8">

<title>显示播放时间</title>

<script>

window.addEventListener("load",function(){

var
myAudio=new Audio();

//获取所有的<li>对象

var
ele=document.querySelectorAll("li");

//为每一个<li>添加点击事件

for(var
i=0;i<ele.length;i++){

ele[i].addEventListener("click",function(){

myAudio.pause();

//获取我们歌曲的名字

var
audioName=this.firstChild.textContent;

//判断歌曲播放格式是否支持afii格式，如果不支持换成.wav格式

if(myAudio.canPlayType("audio/aiff")!="maybe"){

//表示歌曲不能播放

audioName=audioName.replace(/\.aiff/,".wav");

}

(myAudio=new
Audio(audioName)).play();

//获得该歌曲的播放时间

myAudio.addEventListener("timeupdate",function(){

//获取播放的当前时间

var
ct=parseInt(myAudio.currentTime);

//获取播放歌曲的总时间

var
tt=parseInt(myAudio.duration);

document.getElementByIdx_x("currentTime").innerHTML=ct+"秒";

document.getElementByIdx_x("totalTime").innerHTML=tt+"秒";

},true);

},true);

}

//为从头播放按钮添加事件

document.getElementByIdx_x("frombegin").addEventListener("click",function(){

myAudio.currentTime=0;

});

//播放事件

document.getElementByIdx_x("play").addEventListener("click",function(){

myAudio.play();

});

//暂停事件

document.getElementByIdx_x("pause").addEventListener("click",function(){

myAudio.pause();

});

},true);

</script>
</head>
<body>

<h3>html5实现简易的音乐播放器</h3>

<ul>

<li>audio/nizhan.mp3</li>

<li>audio/diyifuren.mp3</li>

<li>audio/yangcong.mp3</li>

<li>audio/first.aiff</li>

</ul>

<br>

当前播放时间:<span
id="currentTime"></span>
歌曲总时间:<span
id="totalTime"></span>

<br><br>

<input type="button" value="从头播放"
id="frombegin">

<input type="button" value="播放"
id="play">

<input type="button" value="暂停"
id="pause">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航