利用HTML5制作音頻播放器插件

這篇文章主要講解了“利用HTML5制作音頻播放器插件”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“利用HTML5制作音頻播放器插件”吧！

上圖便是這個音頻播放器的UI界面圖，里面還隱藏了一個歌曲的播放列表。整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪制而成，看上去有難度的地方就只有CD和打碟器的制作了，在歌曲播放時CD和打碟器都是具有動畫交互效果的，這個在后面的部分會講解到。點擊播放器的CD可以打開播放列表噢~

因為這一期的教程主要是為了展示Html5新增的<audio>標簽和audio元素的Dom API的使用，所以播放器UI的繪制在這里就不詳細解釋了，有疑問的可以自行查看案例的CSS文件的注釋或者在下方留言。

主要功能：

一、播放、暫停、上一首、下一首、音量增減

二、點擊CD可以打開和關閉播放列表

三、可以拖動本地音樂文件到播放器進行播放

Html結構

代碼如下:

<div id="myAudio" >
 <audio>
   <source title="王若琳 - Wild World.mp3" src="<a href="http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3">http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3</a>" />
   <source title="韋禮安 - 還是會.mp3" src="<a href="http://stream18.qqmusic.qq.com/31005070.mp3">http://stream18.qqmusic.qq.com/31005070.mp3</a>" />
   <source title="王若琳 - Lost in paradise.mp3" src="<a href="http://stream12.qqmusic.qq.com/30416842.mp3">http://stream12.qqmusic.qq.com/30416842.mp3</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標簽

在上面的結構中我們可以發(fā)現(xiàn)這個html5新增的audio標簽，它具有一個controls屬性，顧名思義它是播放器的控制器，controls 屬性規(guī)定瀏覽器為音頻提供播放控件，例如在chrome瀏覽器下的audio標簽中設置該屬性，播放器就會以如下的形式出現(xiàn)，如果不設置該屬性，則會是空白一片

代碼如下:

<audio controls src="xxx.mp3"></audio>

但由于在不同瀏覽器下的對audio標簽渲染效果不一，這種簡易的方法并不適合在跨瀏覽器下的使用，并且瀏覽器默認的播放器控件所提供的功能實在是太少了。。所以我們一般通過不設置該屬性的方法來隱藏瀏覽器的默認播放控件，并且手工加入額外的標簽和樣式來定制播放器的UI界面。

播放控制

在播放器的UI界面繪制完成后，首先我們需要做的是為播放、上一首、下一首這三個主要的控制按鈕添加對應的事件監(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)聽中，我們通過調用原始的audio元素的play()和pause()方法來控制音頻的播放和暫停。另外audio元素提供了currentSrc屬性，該屬性表示當前播放文件的文件源，我們通過設置該屬性來控制當前播放的歌曲曲目。

音量控制

接下來我們來對音量條兩邊的兩個小喇叭添加事件監(jiān)聽，使得通過點擊左右兩個小喇叭可以減小和增加當前播放的音量。要設置播放器的音量，我們可以調用audio元素中所提供的volume屬性。volume值最大為1，最小為0，在這里我們通過每次點擊喇叭增減0.1的音量來實現(xiàn)音量的控制。當然你也可以使用別的值。但要注意的是javascript語言不能對小數提供精準的控制，所以每次減少0.1的音量時實際上減少的音量是稍微地大于0.1的，這導致當連續(xù)點擊9次音量減少的按鈕時剩下0.09xxxx的音量，然后你會發(fā)現(xiàn)播放器怎么無法靜音了。。。當然這個問題是很容易解決的（如下所示），只是稍作提醒。

代碼如下:

$(".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)使用滑動器或者點擊音量條某一位置來調控音量的功能，有了上面的基礎，這個就容易完成了。首先我們來看看點擊音量條某一位置來調控音量的功能：點擊音量條的某一位置，計算該由音量條的起點到該位置的長度值，再用該值除以總的音量條長度（在這里是100）得到百分比值，再用該百分比值乘以最大音量值1得到所要跳躍到的音量值，再賦值給volume。通過滑動器來調控音量的方法實現(xiàn)也與此類似，主要是要懂得如何計算滑動器在音量條的位置值。在此就不做詳細解釋，有問題可以下方留言。

代碼如下:

$(".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; /*鼠標初始位置*/
var target = this;
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
 ev.preventDefault();
 var moveX = ev.clientX - origX;        /*計算鼠標移動的距離*/
 var curLeft = origLeft + moveX; /*用鼠標移動的距離表示滑塊的移動距離*/
 (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)在播放器已經基本能用了，但我們還希望能夠直接跳過音頻的一部分到特定的時間點。那么要怎么實現(xiàn)呢？？！制定標準的委員們也不是傻子，這種常用的功能是不會有所疏漏的拉~所以趕緊翻翻API吧，你會發(fā)現(xiàn)audio元素提供了一個名為currentTime的屬性，非常簡明易懂的名稱（其實大多屬性都是很好理解的），設置該屬性可以設置當前播放的時間點。

在這里，我們還需要使用audio的另一個屬性duration，該屬性指的是當前播放文件的總時間長度。因此根據音量控制的實現(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;
});

感謝各位的閱讀，以上就是“利用HTML5制作音頻播放器插件”的內容了，經過本文的學習后，相信大家對利用HTML5制作音頻播放器插件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！