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 文件的链接,上面只列出了函数名,因为代码比较多,全贴出来看这比较乱,这种方式,应该思路比较清晰:)
猛击demo ☻

发表评论

电子邮件地址不会被公开。 必填项已用*标注

7 thoughts on “HTML5音乐播放器(四):播放列表与播放方式

  1. 你好,还有问题,就是在框架中运行的时候会报错,如图:http://p13.freep.cn/p.aspx?u=v20_p13_photo_1302260141062425_0.jpg
    发现貌似这种写法都会有问题
    document.getElementsByTagName(“body”)[0].onclick
    但是换成jquery之后就不再报错了。
    另外这个对于IE9 和 IE10的支持 还需要加强

    1. 报错是IE7,8吧?HTML5标签都不支持,所以就没管它;
      getElementsByTagName是获取带有指定标签名的对象的集合,不存在兼容问题;
      因为音频的格式是ogg的,IE9不支持,当时开发的时候IE10还没出来,so…