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

Wesley13
• 阅读 479

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Peter20 Peter20
3年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Stella981 Stella981
2年前
Android音乐播放器开发(6)—歌曲播放列表
1\.说明本文很早就开始写了,不过中间把电脑借给小伙伴了,后来就忘了这件事了…内容已同步到Gitee仓库(https://gitee.com/Sjcun/androidMusicPlayer)以往的文章服务端:Android音乐播放器开发–服务端(https://www.oschina.net/action/
Wesley13 Wesley13
2年前
Android Service详解
service作为四大组件值得我们的更多的关注在Android中,Activity主要负责前台页面的展示,Service主要负责需要长期运行的任务。例如,一个从service播放音乐的音乐播放器,应被设置为前台运行,因为用户会明确地注意它的运行.在状态栏中的通知可能会显示当前的歌曲并且允许用户启动一个act
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
秦朗 秦朗
3个月前
vue3+ts手写播放器
//下仔のke:https://yeziit.cn/15309/在Vue3和TypeScript中手写一个播放器涉及到许多细节,但我可以为您提供一个简化的版本作为起点。以下是一个基本的播放器组件的示例,它具有播放、暂停和切换歌曲的功能。首先,安装必要的依赖