音樂歌詞同步實現指南

有道友問了我這個問題，因此在這寫了下思路
首先，我默認你至少已經瞭解了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到手機其餘瀏覽器體驗

廣告結束