前段時間寫過一篇介紹簡單音樂播放器效果開發的博文《為你的博客添加簡單的CSS3音樂播放器》，實現了單曲循環播放效果，這個效果也是我的博客首頁一直有的效果，同時文中也介紹了一些簡單的HTML5 Audio標簽的屬性和方法，如 play() , paused()等。當然，之前的效果只適合諸如博客或者某個單頁面(如專題頁面)使用。而現在的可以稱之為完整版的播放器彌補了之前的不足，增加了列表播放，音量控制，播放進度，播放時間以及播放模式，上一曲，下一曲等功能，除了歌詞外，基本就是個播放器了(本來就是播放器)。

除了上述介紹的功能外，有必要說明一下的是，為了迎合新東家的口味，編碼時，JavaScript部分采用原生來寫，沒有使用之前的jQuery庫，代碼量可能大了點，加上注釋，應該在400來行。這也是我第一次采用純原生JavaScript來寫插件，因此，代碼中有很多不足還望指出。音樂文件本來想使用其他音樂網站的接口來著，但是百度了很久，也沒有找到一個開放的接口，應該是音樂之類的有版權限制。如果哪位知道有此類接口煩請告知一聲，demo中的音樂文件列表是我下載了幾首上傳到服務器上弄得(如果有喜歡的音樂可以獲取地址后添加到QQ空間背景音樂哦)，(⊙﹏⊙)b。播放器界面上基本沒考慮太多，把百度新首頁(需登錄)的音樂播放器界面改了下，因此這款播放器也可以稱之為仿百度首頁音樂播放器。

另外，播放器代碼也開源在Github上(https://github.com/S-mohan/smusic)，也可以在《HTML5列表音樂播放器SMUSIC》這個頁面上下載代碼。可以隨意更改，關鍵處，代碼中也有相應的注釋，因此這里就主要總結下開發過程中的一些知識點。

DEMO

css部分很簡單，這里貼出CSS3偽類美化滾動條(列表盒子上用得到)的代碼：

Css3滾動條::-webkit-scrollbar{width:6px;height:6px}

::-webkit-scrollbar-button:vertical{display:none}

::-webkit-scrollbar-track:vertical{background-color:transparent;}

::-webkit-scrollbar-track-piece{background-color:transparent;}

::-webkit-scrollbar-thumb:vertical{background-color:#3792ef;border-radius:6px}

::-webkit-scrollbar-thumb:vertical:hover,

::-webkit-scrollbar-thumb:vertical:active {background-color: #2e86ef}

JavaScript部分除了博文為你的博客添加簡單的CSS3音樂播放器介紹的一些基礎接口外，還是用到volume(音量控制)、muted(靜音操作)、buffered(緩沖)、duration(媒體文件時長)、currentTime(以秒為單位的返回從開始播放到現在播放的事件)等接口。順便推薦兩本好書《HTML5程序設計》以及《JavaScript模式》，京東上都有賣。

Audio Api主要接口描述load()：加載媒體文件，為播放做準備。

play()：加載(如果有必要)并播放文件。

pause()：暫停處于播放狀態的文件。

buffered屬性：返回媒體文件的緩沖范圍(緩沖范圍指的是已緩沖音視頻的時間范圍。如果用戶在音視頻中跳躍播放，會得到多個緩沖范圍，buffered.length可以獲取以緩沖區域的個數，buffered.end()可以獲取以緩沖的時間)。

loop屬性/loop()：為true時，循環播放當前媒體文件。loop(),如果媒體文件播放完畢時能重新播放，則返回true.

volume屬性：獲取和設置音量。

muted屬性：設置(true)和取消(false)靜音操作。

duration屬性：獲取整個媒體文件的播放時長，以s為單位。如果無法獲取，則返回NaN。

startTime屬性：返回最早的播放起始時間，一般是0.0，除非是緩沖過的文件，并且一部分已經不再緩沖區。

currentTime屬性：以秒(S)為單位返回從開始播放到現在所用的事件。在播放過程中，可以設置currentTime來進行搜素，并定位到媒體文件的特定位置(如拖動進度跳轉(快進)播放)。

currentSrc屬性：以字符串形式返回當前正在播放或已加載的媒體文件。

ended屬性/事件：如果媒體文件已經播放完畢，則返回true。并且，該屬性也是一個事件，當媒體文件播放完畢時，才會觸發ended事件，此時，我們可以將播放索引指到下一個。

canplay事件：當已加載的文件能夠到達播放狀態時，才會觸發的事件。

timeupdate事件：當前媒體文件播放位置(currentTime)改變時，才會觸發的事件。在播放過程中，是時時觸發的，因此，可以監聽這個事件來設置播放進度和播放時間的變化

下面的圖示例了緩沖部分和已播放部分的區別

audio buffred

案例中媒體文件播放過程中的時間以及進度的改變主要通過timeupdate事件來實現

//監聽timeupdate，設置進度，PS:播放過程中，當前播放位置改變時，會觸發該事件

this.audioDom.addEventListener('timeupdate',function(){

var audio = this;

if(!isNaN(audio.duration)){

var surplusTime = calcTime(audio.currentTime),

totalTime = calcTime(audio.duration);

var currentProcess = (audio.currentTime / audio.duration) * (me.musicDom.bufferProcess.parentNode.offsetWidth);

//當前播放時間/總時間 = 播放百分比

//播放百分比 * 進度條長度 = 當前播放進度

me.musicDom.time.innerHTML = ''+surplusTime+'/'+totalTime+'';

me.musicDom.curProcess.style.width = currentProcess + 'px';

}

},false);

開發過程中遇到一個JavaScript知識點：通過addEventlistener添加的事件中，如果傳遞了匿名函數，則無法通過removeEventListener來移除，解決方法是添加一個臨時過渡函數來傳遞，而且還可以傳參。

document.addEventListener('click',function(){

alert("已添加");

},false);

document.removeEventListener('click',function(){

//事實上并未移除,document上還是綁定著click事件，點擊還是有效的

},false);

/*過渡函數*/

function tempFun(){}

document.addEventListener('click',tempFun,false);

document.removeEventListener('click',tempFun,false);//移除了

以上就是對HTML5列表播放器的開發總結。播放器代碼也開源在Github上(https://github.com/S-mohan/smusic)，也可以在《HTML5列表音樂播放器SMUSIC》這個頁面上下載代碼。

-- EOF -- 發表于 2015-05-17 23:10:32， 最后更新于 2017-08-23 00:10:35。 已被累計閱讀「?17706?」次。 本文標題：HTML5音樂列表播放器SMusic開發總結

本文鏈接：https://smohan.net/blog/u3zxq1

相關閱讀

總結

以上是生活随笔為你收集整理的html在线音频播放器实训总结,HTML5音乐列表播放器SMusic开发总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。