HTML5制作酷炫音频播放器插件图文教程

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属性，该属性表示当前播放文件的文件源，我们通过设置该属性来控制当前播放的歌曲曲目。

音量控制

接下来我们来对音量条两边的两个小喇叭添加事件监听，使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量，我们可以调用audio元素中所提供的volume属性。volume值最大为1，最小为0，在这里我们通过每次点击喇叭增减0.1的音量来实现音量的控制。当然你也可以使用别的值。但要注意的是javascript语言不能对小数提供精准的控制，所以每次减少0.1的音量时实际上减少的音量是稍微地大于0.1的，这导致当连续点击9次音量减少的按钮时剩下0.09xxxx的音量，然后你会发现播放器怎么无法静音了。。。当然这个问题是很容易解决的（如下所示），只是稍作提醒。