<!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>
