2019獨角獸企業重金招聘Python工程師標準>>>

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

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

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

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

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

這時，可以播放了，我們可以雙擊專輯，打開專輯內的歌曲列表：

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

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

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

隨便點擊一首歌進行播放，這時會先計算點擊的歌曲的引索值：

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

然后把引索值發送給接受引索值的函數，他會根據接收到的參數，生成系統當前播放的歌曲的引索值，然后準備播放器，加載各種信息，并開始播放：

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

當歌曲播放時，系統還要標注出在播放列表中，哪首歌在播放（這是每首歌播放時都要做的）：

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

好了，一首歌播放完了，系統會自動點擊“下一曲”按鈕，或者我不想聽了，點擊了“下一曲”，這時，我們會來到一個像是“分配車間”的地方，他會根據 direction（“上一曲”或“下一曲”）和 mode（列表循環，單曲循環，隨機播放，順序播放），生成一個將要使用的新的引索值，然后發送出去，讓播放器載入各種歌曲信息，并播放下一首歌：

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

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

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

播放下一曲時，選擇的是順序播放，當是最后一首歌時，應該全部都停止：

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

如果想改變播放方式：

//---------------------------------------------------【播放方式控件顯示&隱藏，調節】 (function(){ ... })();//---------------------------------------------------【改變播放方式時圖標變化】 function PlayModeIconChange(PlayMode){ ... }

demo 里有 js 文件的鏈接，上面只列出了函數名，因為代碼比較多，全貼出來看這比較亂，這種方式，應該思路比較清晰：）

猛擊demo ?

轉載于:https://my.oschina.net/swmhxhs/blog/832388

總結

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

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