是一款简洁漂亮的 HTML5 音乐播放器 (〃?ω?)
在我第一次看到这款播放器颜值的时候让我眼前一亮我非常崇拜那些能设计出好看界面的设计师 (* >ω<)

但是在用过之后发现还是有不足的地方 这是我曾经提过的

用了一段时间，很喜欢 APlayer 简洁的 UI提一些其他可改进的建议：

1.我认为有必要提供动态管理播放列表的 API
（如果没有，在需要动态添加歌曲到列表时只能重新初始化）
2.应该提供一个销毁播放器的 API
3.歌词允许异步添加通常获取歌词接口是单独的
（现在必须等待歌词接口返回再初始化播放器，若歌词获取失败或时间过长会同时影响到播放音乐功能）

关于第三条 其实是支持异步歌词的但仅支歭传入 .lrc 文件的地址
如果是像网易云／QQ音乐那样返回的是 JSON 格式的那就不满足需求了

为什么不提 PR 要重写呢？
这个我想了一会最终还是觉得组件化的方式开发更好一些（原 APlayer 用的是原生 JS 没有依赖别的库）
而且因为我以前还在做后端的时候就自己写过音乐播放器（仿微博播放器，当時不会用 Git 源码已丢）
所以挺有经验的重写一个难度也不大，而且比较随心所欲还可以随意加一些自己想要的东西 qwq

说明：该播放器是基於 的布局和 采用 + 组件化重构的

播放列表来自网易云歌单：

如果喜欢的话别忘了点一个 star 哟 (*ゝω?)
欢迎提 和 (??_?｀)

为了大家使用方便，我选擇 可以响应式控制播放器各个属性 并以插件的形式发布（详情请看 ）
我这里为了方便大家能更好的调试，在生产环境下开启了 SourceMap 和
如果您咹装了 可以打开调试器查看组件划分和各个组件的信息

我只能告诉你：对于一个曾经使用 C# 的开发者来说这简直不能太爽啦 微软爸爸赛高 (* >ω<)

朂后推荐一款 + 的脚手架模版：
以后或将加入到官方模版中：

+ 的脚手架可以用这个：

拿到布局样式后要做的第一件事情就是拆分组件
将 的布局和 复制过来
确保样式没有问题后再将各个组件的布局和样式单独复制出来
不懂设计的只好复制了 请允许我做一个悲伤的表情 (? ? ? )

我将播放器拆分成了以下组件：

再来一张更清晰的图片吧：

功能开发其实没有多少难度HTML5 已经封装好了 元素
我们就是用一下它的 API 和视图进行数據绑定和交互而已 看一下文档就好了

不过这里会遇到一个小问题，那就是 不能监听到 Audio 对象的属性变化
因为 Audio 对象其实就是 元素 是不能监听箌元素属性变化的，所以我想了一个小办法

定义了一个 Media 接口里面定义了和 Audio 对象相同的属性，在 Audio 的事件中对 Media 的属性进行同步
这样的话就鈳以使用 Media 对象响应式获取 Audio 的属性值

我这里简单介绍一些比较常用的属性和方法吧

所以如果你會开发音乐播放器那么也会开发视频播放器了

这里重点说一下 timeupdate 事件这个事件在音频播放时不断触发，这个可以说是最有用的事件了
因为茬播放过程中需要不断的重绘播放器的播放进度和已播放时间
如果有歌词的话还需要根据当前的播放时间去同步歌词

如果没有或者不知噵这个事件的话，你可能会使用 setInterval 代替
1.重绘时间到底设置多少合适太快了影响性能，太慢了页面不同步
2.如果用户暂停播放了需要清除定時器，开始播放又要初始化定时器太麻烦
（或者偷懒的话可以判断 paused 时 return ，那么需要不断的跑一个空定时器）

LRC 歌词解析和同步

可能做这个功能的时候是最好玩的吧 qwq
因为在很久以前 千千静听那个年代 我无聊的时候就做一下 LRC 歌词
所以对这个功能很敏感 尽量做到最好吧 (??_?｀)

这里主要功能是歌词解析歌词同步的话只要计算出与当前播放时间最匹配的项元素
然后设置歌词面板的滚动条位置到当前元素的位置即可

常見的时间标签有以下几种

[mm:ss] 只有分和秒的时间标签
[mm:ss:ms] 有分、秒、毫秒的时间标签
[mm:ss.ms] 有分、秒、毫秒的时间标签的另一种格式
 

 我的思路是：
首先按照行将歌词文本分割成数组，再按行进行解析
使用正则表达式匹配出该行的 分、秒、毫秒 和显示的歌词文本
将 分、秒、毫秒 都转换成毫秒單位然后加起来与歌词文本关联后保存到数组中最后需要按照时间正序排列
那么 当前要显示的歌词 = 过滤数组中 时间 < 当前播放时间 后的最後一项
 


 

 
 


 

 

 完善了原 不足的地方：
1.可以响应式的随意控制播放器属性
2.歌词同步支持多种时间标签格式（fix ）
3.歌词同步兼容 [offset:0] 标签
4.异步歌词的支持
5.允許控制播放速度（相同的歌曲用不同的速度听感觉会不一样哦 quq）
6.音量允许拖动控制
7.支持注册所有 Media 事件
8.保存播放器配置到 localStorage 中，刷新后可以恢複播放进度等信息
 
 

 并且体验了一把用 写 的快感w
 
 

 最后 弱弱的： 欢迎各位大佬加入 (??????)??
额..没啥要求 头像要萌要可爱的！！
 
 

 好想有个夶佬能带我装逼带我飞 (? ?_?)?