上圖便是這個音頻播放器的UI界面圖，里面還隱藏了一個歌曲的播放列表。整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪制而成，看上去有難度的地方就只有CD和打碟器的制作了，在歌曲播放時CD和打碟器都是具有動畫交互效果的，這個在后面的部分會講解到。點擊播放器的CD可以打開播放列表噢~
因為這一期的教程主要是為了展示Html5新增的<audio>標(biāo)簽和audio元素的Dom API的使用，所以播放器UI的繪制在這里就不詳細(xì)解釋了，有疑問的可以自行查看案例的CSS文件的注釋或者在下方留言。
主要功能：
一、播放、暫停、上一首、下一首、音量增減
二、點擊CD可以打開和關(guān)閉播放列表
三、可以拖動本地音樂文件到播放器進行播放
Html結(jié)構(gòu)
<div id="myAudio" style="margin:0 auto;">
<audio>
<source title="王若琳 - Wild World.mp3" src="<a />
<source title="韋禮安 - 還是會.mp3" src="<a />
<source title="王若琳 - Lost in paradise.mp3" src="<a />
</audio>
<div class="music_info clearfix">
<div class="cd_holder"><span class="stick"></span><div class="cd"></div></div>
<div class="meta_data">
<span class="title"></span>
<div class="rating">
<div class="starbar">
<ul class="current-rating" data-score="85">
<li class="star5"></li>
<li class="star4"></li>
<li class="star3"></li>
<li class="star2"></li>
<li class="star1"></li>
</ul>
</div>
</div>
<div class="volume_control">
<a class="decrease">a</a>
<span class="base_bar">
<span class="progress_bar"></span>
<a class="slider"></a>
</span>
<a class="increase">b</a>
</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標(biāo)簽
在上面的結(jié)構(gòu)中我們可以發(fā)現(xiàn)這個html5新增的audio標(biāo)簽，它具有一個controls屬性，顧名思義它是播放器的控制器，controls 屬性規(guī)定瀏覽器為音頻提供播放控件，例如在chrome瀏覽器下的audio標(biāo)簽中設(shè)置該屬性，播放器就會以如下的形式出現(xiàn)，如果不設(shè)置該屬性，則會是空白一片
<audio controls src="xxx.mp3"></audio>
但由于在不同瀏覽器下的對audio標(biāo)簽渲染效果不一，這種簡易的方法并不適合在跨瀏覽器下的使用，并且瀏覽器默認(rèn)的播放器控件所提供的功能實在是太少了。。所以我們一般通過不設(shè)置該屬性的方法來隱藏瀏覽器的默認(rèn)播放控件，并且手工加入額外的標(biāo)簽和樣式來定制播放器的UI界面。
播放控制
在播放器的UI界面繪制完成后，首先我們需要做的是為播放、上一首、下一首這三個主要的控制按鈕添加對應(yīng)的事件監(jiān)聽。
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();
});
上述的按鈕點擊的事件監(jiān)聽中，我們通過調(diào)用原始的audio元素的play()和pause()方法來控制音頻的播放和暫停。另外audio元素提供了currentSrc屬性，該屬性表示當(dāng)前播放文件的文件源，我們通過設(shè)置該屬性來控制當(dāng)前播放的歌曲曲目。
音量控制
接下來我們來對音量條兩邊的兩個小喇叭添加事件監(jiān)聽，使得通過點擊左右兩個小喇叭可以減小和增加當(dāng)前播放的音量。要設(shè)置播放器的音量，我們可以調(diào)用audio元素中所提供的volume屬性。volume值最大為1，最小為0，在這里我們通過每次點擊喇叭增減0.1的音量來實現(xiàn)音量的控制。當(dāng)然你也可以使用別的值。但要注意的是javascript語言不能對小數(shù)提供精準(zhǔn)的控制，所以每次減少0.1的音量時實際上減少的音量是稍微地大于0.1的，這導(dǎo)致當(dāng)連續(xù)點擊9次音量減少的按鈕時剩下0.09xxxx的音量，然后你會發(fā)現(xiàn)播放器怎么無法靜音了。。。當(dāng)然這個問題是很容易解決的（如下所示），只是稍作提醒。
$(".volume_control .decrease").click(function() {
var volume = myAudio.volume - 0.1;
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .increase").click(function() {
var volume = myAudio.volume + 0.1;
volume > 1 && (volume = 1);
myAudio.changeVolumeTo(volume);
});
另外我們還需要實現(xiàn)使用滑動器或者點擊音量條某一位置來調(diào)控音量的功能，有了上面的基礎(chǔ)，這個就容易完成了。首先我們來看看點擊音量條某一位置來調(diào)控音量的功能：點擊音量條的某一位置，計算該由音量條的起點到該位置的長度值，再用該值除以總的音量條長度（在這里是100）得到百分比值，再用該百分比值乘以最大音量值1得到所要跳躍到的音量值，再賦值給volume。通過滑動器來調(diào)控音量的方法實現(xiàn)也與此類似，主要是要懂得如何計算滑動器在音量條的位置值。在此就不做詳細(xì)解釋，有問題可以下方留言。
$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume > 1 && (volume = 1);
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().left; /*滑塊初始位置*/
var origX = ev.clientX; /*鼠標(biāo)初始位置*/
var target = this;
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*計算鼠標(biāo)移動的距離*/
var curLeft = origLeft + moveX; /*用鼠標(biāo)移動的距離表示滑塊的移動距離*/
(curLeft < -7) && (curLeft = -7);
(curLeft > 93) && (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
});
});
時間控制
好了，現(xiàn)在播放器已經(jīng)基本能用了，但我們還希望能夠直接跳過音頻的一部分到特定的時間點。那么要怎么實現(xiàn)呢？？！制定標(biāo)準(zhǔn)的委員們也不是傻子，這種常用的功能是不會有所疏漏的拉~所以趕緊翻翻API吧，你會發(fā)現(xiàn)audio元素提供了一個名為currentTime的屬性，非常簡明易懂的名稱（其實大多屬性都是很好理解的），設(shè)置該屬性可以設(shè)置當(dāng)前播放的時間點。
在這里，我們還需要使用audio的另一個屬性duration，該屬性指的是當(dāng)前播放文件的總時間長度。因此根據(jù)音量控制的實現(xiàn)，我們可以這樣做：
一、點擊進度條的某一位置，計算該由進度條的起點到該位置的長度占總進度條長度的百分比值（例如點擊進度條的正中間位置，則進度條的起點到該位置的長度占總進度條長度的50%），記為percentage。
二、然后用percentage乘以文件的總時間長度duration就得到了你想要跳躍到的時間點的值，再把該值賦給currentTime即完成了所要實現(xiàn)的功能。
$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
});
到這里，播放器已經(jīng)基本成型了。剩下一些無關(guān)痛癢（其實對我來說才是最重要的哈哈）的UI交互實現(xiàn)，如果大家有興趣的話就到源碼中查看吧，有問題可以在下方評論留言，希望能多多交流和學(xué)習(xí)。
