音乐歌词同步实现指南

有道友问了我这个问题，因此在这写了下思路
首先，我默认你至少已经了解了h5的audio标签的相关属性，直入正题
audio使用指南
audio标签
audio之HTML 事件属性

old歌词

通常的说，lyric文件由时间的tag标签组成，如截图所示

如今以此歌词为例，对该歌词进行以下处理：

1. 以行为单位拆分每一句歌词

2. 将每句歌词的时间tag和内容分离

3. 将时间转换为分钟

new 歌词

经过下面简单的正则转化

let pattern = /\[\d{2}:\d{2}.\d{2}\]/g;
      while (!pattern.test(lines[0])) {
        lines = lines.slice(1);
      }

咱们能够获得以下新歌词数组（看着大家急不可耐的神情，我就不在意这样的展现方式了）

分离出来后咱们要作的其实就很简单了
将分离出来的[时间,内容]与当前的音乐播放时间对比，设置当前序号，根据序号将对应显示的歌词高亮，同时调整视图区top，给予用户视觉上的滚动效果。

没图没真相，来来来

具体实现代码，关注个人网易云音乐实践，这里我就很少写了，提供思路，仅供参考，若是有更加优雅的实现方式，很是但愿你能@我

网易云音乐移动版（期待你的star）

• api来源(感谢Binaryify不断更新的网易云音乐接口，这也将是这个项目不断拓展下去的坚实依托)

• 源码地址

• 项目预览（web端在chrome调试模式下效果更佳）

• 针对segmenfault类app暂时没法有效预览的问题，建议粘贴http://118.89.226.181:8080到手机其余浏览器体验

广告结束