HTML5音乐播放器(四):播放列表与播放方式
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音乐播放器(四):播放列表与播放方式相关推荐
- html 音乐 QQ播放器 外链 代码 播放器 外链 代码
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha QQ播放器 外链 代码 播放器 外链 代码 ======== 歌曲链接 QQ播放器 外链 ...
- 音乐播放器(4)--Mp3歌曲播放与控制
这一篇介绍一下使用java播放Mp3的,这里使用的是一个第三方包(jl.jar),项目主页http://www.javazoom.net/index.shtml,有了这个包,我们便可以轻松的实现mp3 ...
- 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
- 网页播放器自定义倍速播放
网页播放器自定义倍速播放,可设置播放器的播放速度为1,2,3,5,6,7等自定义播放速度.利用html5的特性进行处理. 一般网页播放器的速度限制在最高两倍速播放,通常这就符合一般的要求了.但是确实有 ...
- 借用 potplayer 播放器,在本地播放 b 站视频也能看弹幕了
苏生不惑第164 篇原创文章,将本公众号设为星标,第一时间看最新文章. 关于b站之前已经写过了下列文章,有兴趣可以点击阅读: 那些我关注的 b 站 up 主 bilibili(b站)升级到BV号了,还 ...
- FFmpeg音频播放器(8)-创建FFmpeg播放器
原文地址::https://www.jianshu.com/p/73b0a0a9bb0d 相关文章 1.FFmpeg音频解码播放----https://www.jianshu.com/p/76562a ...
- Ubuntu16.04下使用VLC media player播放器实现倍速播放
Ubuntu16.04下使用VLC media player播放器实现倍速播放 打开软件 开启倍速功能 打开软件 视频文件右键"属性"-"打开方式"-" ...
- 如何给播放器增加倍速播放
1.一般网页上播放的播放器没有倍速播放,有时候需要这样的功能 2.演示:http://www.gehweb.top/b.html 3.例如这样写就可以实现这个功能: <video id=&quo ...
- android+jiaozi播放器,android视频播放-饺子播放器
饺子播放器是android主流播放器中之一,使用简单,功能全面. 不要按照github文档来,api有变动. 1.依赖 这个地方也要添加glide的依赖,因为视频默认图需要glide加载. imple ...
- 视频融合平台EasyCVR集成播放器,但是无法播放该如何解决?
EasyCVR视频融合云平台基于云边端一体化架构,兼容性高.拓展性强,可支持多类型设备.多协议方式接入,包括国标GB/T28181.RTMP.RTSP/Onvif协议,以及厂家的私有协议,如:海康Eh ...
最新文章
- 推荐系统-03-简单基于用户的推荐
- 第二十二回 基础才是重中之重~ThreadStatic静态字段在每个线程里的唯一性
- 5G来了4G降速?负载均衡链路聚合器了解一下
- C语言中的关键字概览
- 视频 + PPT | 数字化运营,从理论到实践
- HDU Starship Troopers (树形DP)
- 九度 1479:移位和旋转
- .net多层结构 sql注入
- 变形transform小结 1216
- 正在中止线程 异常处理
- aws rds监控慢sql_如何使用Web控制台和AWS CLI停止AWS RDS SQL Server
- 20190819:(leetcode习题)字符串中的第一个唯一字符
- oracle var/tmp,[20141128]目录/var/tmp/oracle.txt
- 浅谈最近公共祖先(LCA)
- scratch高级进阶的游戏项目分享:(知识的综合应用),含项目源文件百度云盘链接
- VUE 身份证号验证
- C语言自学路之验证码
- 使用Apache FtpServer搭建FTP服务器 [FlashFXP]
- c语言中puts的作用,c语言中puts的用法
- 传音手机增长策略:用户需求为核心,创新生产逻辑和客户关系