前言

之前通過js實現音頻、視頻播放，此文是實現音頻與歌詞同步播放的實現，主要是用于學習實現思想，本文需要想要了解的知識點如下：

• 如何實現音頻與歌詞同步？
• 如何改變瀏覽器默認的滾動條樣式？

實現

此文實現只專注于實現思想，沒有去處理兼容性細節，請使用Chrome來查看，下面主要說說音頻與歌詞同步的實現思路：

• 歌詞文件是.lrc格式的，改文件中的內容形式如下：
  

從上圖中可以看出是由時間點+歌詞內容組成，基本看到lrc文件就知道了大體的實現思路了

大體的思想思路是：

• 獲取歌詞文件
• 獲取時間點數組
• 獲取歌詞內容數組
• 判斷音頻是否加載成功
• 成功就將p節點內容就是每一行歌詞，將其appendChild到歌詞容器元素中
• 監聽timeupdate事件，根據當前時間點與歌詞時間點做比較，設置當前歌詞的樣式，并設置scrollTop是歌詞區域滾動

具體的實現效果如下：

此文中將歌詞寫死在代碼中了，Js沒辦法主動獲取本地文件，通過ajax的方式，又存在特定瀏覽器兼容問題，考慮到是以學習其思想為目的，沒有搭建后臺服務，如果你不想要將歌詞寫死在代碼中，可有如下方法：

• 搭建后臺服務，通過ajax來獲取
• 通過jsonp形式來獲取
• 通過input[type=”file”] + FileReader的形式來

至此，已通過js實現了音頻、視頻、音頻與歌詞同步，這些都是主要點，后面會啟動一個稍微大的項目，目前將目標定位為網易云音樂（客戶端樣式web版）。

總結

以上是生活随笔為你收集整理的js实现音频歌词同步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。