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

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

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

DEMO

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

Css3滾動(dòng)條::-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部分除了博文為你的博客添加簡(jiǎn)單的CSS3音樂播放器介紹的一些基礎(chǔ)接口外，還是用到volume(音量控制)、muted(靜音操作)、buffered(緩沖)、duration(媒體文件時(shí)長(zhǎng))、currentTime(以秒為單位的返回從開始播放到現(xiàn)在播放的事件)等接口。順便推薦兩本好書《HTML5程序設(shè)計(jì)》以及《JavaScript模式》，京東上都有賣。

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

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

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

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

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

volume屬性：獲取和設(shè)置音量。

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

duration屬性：獲取整個(gè)媒體文件的播放時(shí)長(zhǎng)，以s為單位。如果無法獲取，則返回NaN。

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

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

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

ended屬性/事件：如果媒體文件已經(jīng)播放完畢，則返回true。并且，該屬性也是一個(gè)事件，當(dāng)媒體文件播放完畢時(shí)，才會(huì)觸發(fā)ended事件，此時(shí)，我們可以將播放索引指到下一個(gè)。

canplay事件：當(dāng)已加載的文件能夠到達(dá)播放狀態(tài)時(shí)，才會(huì)觸發(fā)的事件。

timeupdate事件：當(dāng)前媒體文件播放位置(currentTime)改變時(shí)，才會(huì)觸發(fā)的事件。在播放過程中，是時(shí)時(shí)觸發(fā)的，因此，可以監(jiān)聽這個(gè)事件來設(shè)置播放進(jìn)度和播放時(shí)間的變化

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

audio buffred

案例中媒體文件播放過程中的時(shí)間以及進(jìn)度的改變主要通過timeupdate事件來實(shí)現(xiàn)

//監(jiān)聽timeupdate，設(shè)置進(jìn)度，PS:播放過程中，當(dāng)前播放位置改變時(shí)，會(huì)觸發(fā)該事件

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);

//當(dāng)前播放時(shí)間/總時(shí)間 = 播放百分比

//播放百分比 * 進(jìn)度條長(zhǎng)度 = 當(dāng)前播放進(jìn)度

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

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

}

},false);

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

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

alert("已添加");

},false);

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

//事實(shí)上并未移除,document上還是綁定著click事件，點(diǎn)擊還是有效的

},false);

/*過渡函數(shù)*/

function tempFun(){}

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

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

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

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

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

相關(guān)閱讀

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。