用 TS + Vue 重写 APlayer HTML5 音乐播放器

简介

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

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

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

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

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

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

截图

说明：该播放器是基于 @DIYgod/APlayer 的布局和 样式 采用 TS + Vue 组件化重构的

演示：http://aplayer.quq.cat
文档：http://aplayer.quq.cat/docs
源码：https://github.com/MoeFE/vue-...
NPM：https://www.npmjs.com/package...
播放列表来自网易云歌单：http://music.163.com/#/playli...

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

框架选型

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

至于为什么选择用 TypeScript 本文就不做过多的解释了
大家可以自行在网上找一下 TypeScript 和 JavaScript 的区别

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

最后推荐一款 TS + Vue 的脚手架模版：https://github.com/Toilal/vue...
以后或将加入到官方模版中：https://github.com/vuejs-temp...

TS + React 的脚手架可以用这个：https://github.com/wmonk/crea...

拆分组件

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

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

组件名称	组件说明
APlayer.ts	播放器容器组件
Button.ts	按钮组件
Picture.ts	歌曲图片组件
Container.ts	右侧容器组件
Info.ts	歌曲信息组件
Lyric.ts	歌词面板组件
Progress.ts	进度条组件
Time.ts	播放时间组件
Volume.ts	音量控制组件
List.ts	播放列表组件
Item.ts	播放列表项组件

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

点击查看高清原图

功能开发

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

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

定义了一个 Media 接口，里面定义了和 Audio 对象相同的属性，在 Audio 的事件中对 Media 的属性进行同步
这样的话，就可以使用 Media 对象响应式获取 Audio 的属性值
可以查看这一段代码：APlayer.ts#L326-L334

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

名称	说明
autoplay	是否自动播放 （在 Safari 中无效，可以自行在初始化音频后手动调用 play 方法）
bufferd	获取已缓冲的进度（必须在 readeyState >= 3 之后获取，否则会抛异常）
loop	是否循环播放音频（推荐根据当前播放模式自行实现该功能）
preload	预加载选项，推荐使用 metadata，在未播放时仅获取音频的长度，而不要加载整个音频
src	获取或设置音频的播放地址
volume	获取或设置音频的音量（0～1）
paused	获取当前音频是否已暂停
currentTime	获取或设置当前音频的播放进度（单位：秒）
duration	获取当前音频的长度（单位：秒）
playbackRate	获取或设置当前音频的播放速度
play ()	播放音频
pause ()	暂停音频

点击查看所有 Media 事件

事实上 Audio 和 Video 对象差不多 都属于 Media
所以如果你会开发音乐播放器那么也会开发视频播放器了

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

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

LRC 歌词解析和同步

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

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

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

[mm:ss] 只有分和秒的时间标签
[mm:ss:ms] 有分、秒、毫秒的时间标签
[mm:ss.ms] 有分、秒、毫秒的时间标签的另一种格式
[mm:ss:ms][mm:ss.ms] 多个时间标签共享这一句相同的歌词

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

private async parseLRC (): Promise<void> {
  if (!this.lrc || this.lrc === 'loading') return
  if (this.isURL(this.lrc)) { // 如果歌词是一个URL地址则请求该地址获得歌词文本
    const { data } = await Axios.get(this.lrc.toString())
    this.currentLRC = data
  } else this.currentLRC = this.lrc

  const reg = /\[(\d+):(\d+)[.|:](\d+)\](.+)/
  const regTime = /\[(\d+):(\d+)[.|:](\d+)\]/g
  const regCompatible = /\[(\d+):(\d+)]()(.+)/
  const regTimeCompatible = /\[(\d+):(\d+)]/g
  const regOffset = /\[offset:\s*(-{0,1}\d+)\]/
  const offsetMatch = this.lrc.match(regOffset)
  const offset = offsetMatch ? Number.parseInt(offsetMatch[1]) : 0
  this.LRC = []

  const matchAll = (line: string) => {
    let match = line.match(reg) || line.match(regCompatible)
    if (!match) return
    if (match.length !== 5) return
    const minutes = Number.parseInt(match[1]) || 0
    const seconds = Number.parseInt(match[2]) || 0
    const milliseconds = Number.parseInt(match[3]) || 0
    const time = (minutes * 60 * 1000 + seconds * 1000 + milliseconds) + offset
    const text = (match[4] as string).replace(regTime, '').replace(regTimeCompatible, '')
    if (!text) return // 优化：不要显示空行
    this.LRC.push({ time, text })
    matchAll(match[4]) // 递归匹配多个时间标签
  }

  this.currentLRC.replace(/\\n/g, '\n').split('\n').forEach(line => matchAll(line))

  // 歌词格式不支持
  if (this.LRC.length <= 0) this.LRC = [{ time: -1, text: '(・∀・*) 抱歉，该歌词格式不支持' }]
  else this.LRC.sort((a, b) => a.time - b.time)
}

点击查看完整代码

总结

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

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

最后 弱弱的：@MoeFE 欢迎各位大佬加入 (๑•̀ㅂ•́)و✧
额..没啥要求 头像要萌要可爱的！！

好想有个大佬能带我装逼带我飞 (ง •_•)ง