前言

之前通過js實(shí)現(xiàn)音頻、視頻播放，此文是實(shí)現(xiàn)音頻與歌詞同步播放的實(shí)現(xiàn)，主要是用于學(xué)習(xí)實(shí)現(xiàn)思想，本文需要想要了解的知識點(diǎn)如下：

• 如何實(shí)現(xiàn)音頻與歌詞同步？
• 如何改變?yōu)g覽器默認(rèn)的滾動條樣式？

實(shí)現(xiàn)

此文實(shí)現(xiàn)只專注于實(shí)現(xiàn)思想，沒有去處理兼容性細(xì)節(jié)，請使用Chrome來查看，下面主要說說音頻與歌詞同步的實(shí)現(xiàn)思路：

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

從上圖中可以看出是由時(shí)間點(diǎn)+歌詞內(nèi)容組成，基本看到lrc文件就知道了大體的實(shí)現(xiàn)思路了

大體的思想思路是：

• 獲取歌詞文件
• 獲取時(shí)間點(diǎn)數(shù)組
• 獲取歌詞內(nèi)容數(shù)組
• 判斷音頻是否加載成功
• 成功就將p節(jié)點(diǎn)內(nèi)容就是每一行歌詞，將其appendChild到歌詞容器元素中
• 監(jiān)聽timeupdate事件，根據(jù)當(dāng)前時(shí)間點(diǎn)與歌詞時(shí)間點(diǎn)做比較，設(shè)置當(dāng)前歌詞的樣式，并設(shè)置scrollTop是歌詞區(qū)域滾動

具體的實(shí)現(xiàn)效果如下：

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

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

至此，已通過js實(shí)現(xiàn)了音頻、視頻、音頻與歌詞同步，這些都是主要點(diǎn)，后面會啟動一個(gè)稍微大的項(xiàng)目，目前將目標(biāo)定位為網(wǎng)易云音樂（客戶端樣式web版）。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。