h5列表 php,HTML5音乐列表

video{

width: 500px;

height: 300px;

}

• 李荣浩 - 你的背包.mp3
• 葛林 - 林中鸟.mp3
• 王强 - 秋天不回来.mp3
• 网络歌手 - 不浪漫罪名.mp3
• 庄心妍 - 我选择原谅.mp3

歌曲名称：暂无选中

播放时间：0秒/总共：0秒

重开

开始

暂停

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

var myaudio=new Audio();

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

for(var i=0;i

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

myaudio.pause();//播放暂停

var audioname=this.firstChild.textContent;//取得曲目文件名

if(myaudio.canPlayType("audio/wav")!="maybe"){

//不能播放wav形式音频的情况下播放ogg格式

audioname=audioname.replace(/\.wav/,".ogg");

}

(myaudio=new Audio(audioname)).play();//播放音乐

// myaudio.volume=0.1;//一半音量

// myaudio.autobuffer();

//显示播放时间

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

var ct=parseInt(myaudio.currentTime);

//当前的播放时间(舍弃小数点以下的数据)

var total=parseInt(myaudio.duration);

//曲目名称

document.getElementById("name").innerHTML="歌曲名称："+audioname;

//整体播放时间(舍弃小数点以下数据)

document.getElementById("stat").innerHTML="播放时间："+ct+"秒/总共："+total+"秒";

},true);

},true);

}

//播放按钮，停止按钮，返回按钮的设置

document.getElementById("playbutton").addEventListener("click",function(){

myaudio.play();

},true);

document.getElementById("stopbutton").addEventListener("click",function(){

myaudio.pause();

},true);

document.getElementById("rewindbutton").addEventListener("click",function(){

myaudio.currentTime=0;

},true);

},true);