自定义audio控制器+滚动字幕

自定义audio控制器+滚动字幕

最近公司的一个版本增加了音频课的功能，要求自定义音频控件，及滚动字幕；效果如图：

最终效果图，因公司业务，功能有删减

需求分析

1.要想写自定义audio组件首先需要了解audio媒体相关事件 和audio对象属性，这里就不一 一展开了，要提前了解；

2.字幕随着播放 快进 滚动，这是什么原理?经过查看资料，了解到，歌词一般会以xxx.lrc文件解析，具体格式如图：

歌词格式

所以我们可以根据时间节点在控制字幕滚动。

代码：

我是将audio封装了一个对象中，可以做成JQ插件，好多地方还可以做优化，大家有意见请提出，，废话不说直接上代码：

因无法粘贴代码所以直接提供云盘下载地址

链接：https://pan.baidu.com/s/1ggT1GiB 密码：1ahd

放在服务器环境即可查看！