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