<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<style type="text/css">
video{
500px;
height: 300px;
}
</style>
<ul>
<li>李荣浩 - 你的背包.mp3</li>
<li>葛林 - 林中鸟.mp3</li>
<li>王强 - 秋天不回来.mp3</li>
<li>网络歌手 - 不浪漫罪名.mp3</li>
<li>庄心妍 - 我选择原谅.mp3</li>
</ul>
<div id="name">歌曲名称：暂无选中</div>
<div id="stat">播放时间：0秒/总共：0秒</div>
<div id="control">
<button id="rewindbutton">重开</button>
<button id="playbutton">开始</button>
<button id="stopbutton">暂停</button>
</div>
<script type="text/javascript">
window.addEventListener("load",function(){
var myaudio=new Audio();
var ele=document.querySelectorAll("li");
for(var i=0;i<ele.length;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);
</script>
</body>
</html>