html在线音频播放器实训总结,HTML5音乐列表播放器SMusic开发总结
前段時(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 三星看好S23 Ultra销量表现 将把
- 下一篇: sharepointa嵌入HTML网页,