前言
之前通过js实现音频、视频播放，此文是实现音频与歌词同步播放的实现，主要是用于学习实现思想，本文需要想要了解的知识点如下：
- 如何实现音频与歌词同步？
- 如何改变浏览器默认的滚动条样式？
实现
此文实现只专注于实现思想，没有去处理兼容性细节，请使用Chrome来查看，下面主要说说音频与歌词同步的实现思路：
- 歌词文件是.lrc格式的，改文件中的内容形式如下：
从上图中可以看出是由时间点+歌词内容组成，基本看到lrc文件就知道了大体的实现思路了
大体的思想思路是：
- 获取歌词文件
- 获取时间点数组
- 获取歌词内容数组
- 判断音频是否加载成功
- 成功就将p节点内容就是每一行歌词，将其appendChild到歌词容器元素中
- 监听timeupdate事件，根据当前时间点与歌词时间点做比较，设置当前歌词的样式，并设置scrollTop是歌词区域滚动
具体的实现效果如下：
此文中将歌词写死在代码中了，Js没办法主动获取本地文件，通过ajax的方式，又存在特定浏览器兼容问题，考虑到是以学习其思想为目的，没有搭建后台服务，如果你不想要将歌词写死在代码中，可有如下方法：
- 搭建后台服务，通过ajax来获取
- 通过jsonp形式来获取
- 通过input[type=”file”] + FileReader的形式来
至此，已通过js实现了音频、视频、音频与歌词同步，这些都是主要点，后面会启动一个稍微大的项目，目前将目标定位为网易云音乐（客户端样式web版）。