2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

發(fā)現(xiàn)播放列表和播放方式切換兩個(gè)功能是連在一起的，單獨(dú)一個(gè)拿出來說不太合適，所以就都一塊弄完了。廢話不多說，進(jìn)入主題，功能的邏輯我是這么設(shè)計(jì)的：

把整個(gè)歌曲文件的信息都寫在 json 文件里，獲取并生成播放列表。當(dāng)播放歌曲時(shí)，系統(tǒng)會(huì)生成當(dāng)前播放歌曲的引索值（例如：1,2，表示第二張專輯的第三首歌，這個(gè)很重要，歌曲切換都是基于這個(gè)引索值的），當(dāng)要播放下一曲時(shí)，系統(tǒng)會(huì)根據(jù)當(dāng)前是什么播放方式（列表循環(huán)，單曲循環(huán)，隨機(jī)播放，順序播放），生成新的引索值，然后通知播放器，下一首該怎么播放，是隨機(jī)，還是循環(huán)，還是播放結(jié)束。

這部分代碼不難，主要是要弄清楚整個(gè)流程應(yīng)該是個(gè)什么方式，代碼我就不貼了，demo 里都有，注釋也都比較全。我描繪一下歌曲的播放流程，并寫出它用到的函數(shù)，我想可能這種方法比較容易講清楚：）

首先，我們要打開專輯列表，在打開的同時(shí)，生成專輯列表：

//---------------------------------------------------【功能：打開&關(guān)閉專輯列表】 MUSICENGINE.prototype.albumLists = function(){ ... };//---------------------------------------------------【功能：生成專輯列表】 MUSICENGINE.prototype.formatAlbumLists = function(){ ... };

這時(shí)，可以播放了，我們可以雙擊專輯，打開專輯內(nèi)的歌曲列表：

//---------------------------------------------------【雙擊專輯生成歌曲列表】 function formatInAlbumLists(song,AlbumName){ ... }

也可以點(diǎn)擊“查看全部歌曲”，去看看一共都有哪些歌曲：

//---------------------------------------------------【功能：生成全部歌曲列表】 MUSICENGINE.prototype.formatAllSongLists = function(){ ... };

隨便點(diǎn)擊一首歌進(jìn)行播放，這時(shí)會(huì)先計(jì)算點(diǎn)擊的歌曲的引索值：

//---------------------------------------------------【功能：計(jì)算點(diǎn)擊的歌曲&專輯引索】 MUSICENGINE.prototype.muiscIndexAndAlbumIndex = function(activeSong){ ... };

然后把引索值發(fā)送給接受引索值的函數(shù)，他會(huì)根據(jù)接收到的參數(shù)，生成系統(tǒng)當(dāng)前播放的歌曲的引索值，然后準(zhǔn)備播放器，加載各種信息，并開始播放：

//--------------------------------【功能：根據(jù)系統(tǒng)返回的歌曲&專輯引索，準(zhǔn)備播放器】 MUSICENGINE.prototype.playIndex = function(albumIndex,songIndex){ ... };

當(dāng)歌曲播放時(shí)，系統(tǒng)還要標(biāo)注出在播放列表中，哪首歌在播放（這是每首歌播放時(shí)都要做的）：

//---------------------------------------------------【顯示當(dāng)前播放歌曲】 function currentlyPlayingSong(){ ... }

好了，一首歌播放完了，系統(tǒng)會(huì)自動(dòng)點(diǎn)擊“下一曲”按鈕，或者我不想聽了，點(diǎn)擊了“下一曲”，這時(shí)，我們會(huì)來到一個(gè)像是“分配車間”的地方，他會(huì)根據(jù) direction（“上一曲”或“下一曲”）和 mode（列表循環(huán)，單曲循環(huán)，隨機(jī)播放，順序播放），生成一個(gè)將要使用的新的引索值，然后發(fā)送出去，讓播放器載入各種歌曲信息，并播放下一首歌：

//-------------------------------------【功能：根據(jù)歌曲的播放方式分配下首歌曲的引索】 MUSICENGINE.prototype.songPlayMode = function(direction,mode){ ... };//--------------------------------【功能：根據(jù)系統(tǒng)返回的歌曲&專輯引索，準(zhǔn)備播放器】 MUSICENGINE.prototype.playIndex = function(albumIndex,songIndex){ ... };

播放下一曲時(shí)，可能下一曲是另一張專輯了，這時(shí)我們要更新當(dāng)前視圖下的列表：

//---------------------------------------------------【功能：更新當(dāng)前視圖下的播放列表】 MUSICENGINE.prototype.updatePlaylist = function(){ ... };

播放下一曲時(shí)，選擇的是順序播放，當(dāng)是最后一首歌時(shí)，應(yīng)該全部都停止：

//---------------------------------------------------【播放器初始化】 function playerInitialization(){ ... }

如果想改變播放方式：

//---------------------------------------------------【播放方式控件顯示&隱藏，調(diào)節(jié)】 (function(){ ... })();//---------------------------------------------------【改變播放方式時(shí)圖標(biāo)變化】 function PlayModeIconChange(PlayMode){ ... }

demo 里有 js 文件的鏈接，上面只列出了函數(shù)名，因?yàn)榇a比較多，全貼出來看這比較亂，這種方式，應(yīng)該思路比較清晰：）

猛擊demo ?

轉(zhuǎn)載于:https://my.oschina.net/swmhxhs/blog/832388

總結(jié)

以上是生活随笔為你收集整理的HTML5音乐播放器（四）：播放列表与播放方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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