HTML5音乐播放器(四):播放列表与播放方式

逍遥随从 逍遥随从 2018年01月11日 11:41:31 阅读 248

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

把整个歌曲文件的信息都写在 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 ☻

用户评论