修改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

相關文章
相關標籤/搜索