html音乐唱片自动转,HTML5音乐播放器（四）：播放列表与播放方式

发现播放列表和播放方式切换两个功能是连在一起的，单独一个拿出来说不太合适，所以就都一块弄完了。废话不多说，进入主题，功能的逻辑我是这么设计的：

把整个歌曲文件的信息都写在 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 文件的链接，上面只列出了函数名，因为代码比较多，全贴出来看这比较乱，这种方式，应该思路比较清晰：)