乐趣区

修改lyricparser解析网易云音乐歌词针对angular用户

最近在用 angular8 仿网易云音乐的 pc 端,考虑出个 ng 相关的教程

写到歌词的时候开始直接用了黄大仙的 lyric-parser,发现不太适用网易云的歌词,主要有如下几点:

  • 网易云有中英两套歌词
  • 很多歌曲中英文的歌词开头几行对不上
  • 歌词的微秒位可能有 3 位数的 (QQ 音乐只有两位),造成时间误差

其中第二点的情况比较棘手,比如英文歌词比中文的开头多几行,比如这种:

反过来也有可能。
所以需要改下 lyric-parser 中的 initLines 方法。
lyric 字段是主歌词,我只要保证主歌词完整,tlyric 每行只要对应上 lyric 就行了,所以我先把 tlyric 开头多余的行给过滤掉了:

然后把 lyric 字段开头多余的几行单独抽出来,这样 lyric 和 tlyric 就一一对应了。再利用 rxjs 中的 zip 方法可以方便地处理这种对应的数据流:

zip 方法会严格对应地输出流,把每行的中文,英文和歌词的时间戳保存起来就行了:

其他部分不用怎么修改,angular 用户可以直接 copy 下来试下,项目地址

退出移动版