</div>
</div>
</div>
<ul class=”music_list”></ul>
<div class=”controls”>
<div class=”play_controls”>
<a class=”btn_previous”>e</a>
<a class=”btn_play”>c</a>
<a class=”btn_next”>d</a>
</div>
<div class=”time_line”>
<span class=”passed_time”>0:00</span>
<span class=”base_bar”>
<span class=”progress_bar”></span>
</span>
<span class=”total_time”>0:00</span>
</div>
</div>
</div>
audio标签
在上面的结构中我们可以发现这个html5新增的audio标签，它具有一个controls属性，顾名思义它是播放器的控制器，controls 属性规定浏览器为音频提供播放控件，例如在chrome浏览器下的audio标签中设置该属性，播放器就会以如下的形式出现，如果不设置该属性，则会是空白一片
复制代码<audio controls src=”xxx.mp3″></audio>
但由于在不同浏览器下的对audio标签渲染效果不一，这种简易的方法并不适合在跨浏览器下的使用，并且浏览器默认的播放器控件所提供的功能实在是太少了。。所以我们一般通过不设置该属性的方法来隐藏浏览器的默认播放控件，并且手工加入额外的标签和样式来定制播放器的UI界面。
播放控制
在播放器的UI界面绘制完成后，首先我们需要做的是为播放、上一首、下一首这三个主要的控制按钮添加对应的事件监听。
复制代码
var myAudio = $(“#myAudio audio”)[0];
var $sourceList = $(“#myAudio source”);
var currentSrcIndex = 0;
var currentSr = “”;
复制代码
$(“.btn_play”).click(function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
});
$(“.btn_next”).click(function(){
++currentSrcIndex > $sourceList.length – 1 && (currentSrcIndex = 0);
currentSrc = $(“#myAudio source”).eq(currentSrcIndex).prop(“src”);
myAudio.src = currentSrc;
myAudio.play();
});
$(“.btn_previous”).click(function(){
–currentSrcIndex < 0 && (currentSrcIndex = 0);
currentSrc = $(“#myAudio source”).eq(currentSrcIndex).prop(“src”);
myAudio.src = currentSrc;
myAudio.play();
});
上述的按钮点击的事件监听中，我们通过调用原始的audio元素的play()和pause()方法来控制音频的播放和暂停。另外audio元素提供了currentSrc属性，该属性表示当前播放文件的文件源，我们通过设置该属性来控制当前播放的歌曲曲目。
