js实现音频歌词同步

前言

之前通过js实现音频、视频播放，此文是实现音频与歌词同步播放的实现，主要是用于学习实现思想，本文需要想要了解的知识点如下：

如何实现音频与歌词同步？

如何改变浏览器默认的滚动条样式？

实现

此文实现只专注于实现思想，没有去处理兼容性细节，请使用Chrome来查看，下面主要说说音频与歌词同步的实现思路：

歌词文件是.lrc格式的，改文件中的内容形式如下：



从上图中可以看出是由时间点+歌词内容组成，基本看到lrc文件就知道了大体的实现思路了

大体的思想思路是：

获取歌词文件

获取时间点数组

获取歌词内容数组

判断音频是否加载成功

成功就将p节点内容就是每一行歌词，将其appendChild到歌词容器元素中

监听timeupdate事件，根据当前时间点与歌词时间点做比较，设置当前歌词的样式，并设置scrollTop是歌词区域滚动

具体的实现效果如下：



此文中将歌词写死在代码中了，Js没办法主动获取本地文件，通过ajax的方式，又存在特定浏览器兼容问题，考虑到是以学习其思想为目的，没有搭建后台服务，如果你不想要将歌词写死在代码中，可有如下方法：

搭建后台服务，通过ajax来获取

通过jsonp形式来获取

通过input[type=”file”] + FileReader的形式来

至此，已通过js实现了音频、视频、音频与歌词同步，这些都是主要点，后面会启动一个稍微大的项目，目前将目标定位为网易云音乐（客户端样式web版）。