修改lyric-parser,解析网易云音乐歌词(针对angular用户)

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

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

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

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

其余部分不用怎么修改,angular用户能够直接copy下来试下,项目地址blog

相关文章
相关标签/搜索