用JS實現歌詞與播放音樂同步

第一步：把歌詞解析成JS對象

參看我的上一篇文章：用JS解析LRC格式的歌詞
解析后的歌詞寫到頁面的一個列表中，效果如下：

主要HTML代碼：

<!-- 播放器 --> <audio id="audio" src="media/沙漠駱駝 - 展展與羅羅.mp3" controls preload="auto"></audio> <!-- 歌詞 --> <div class="lyric_area"><ul id="lyric"></ul> </div>

CSS：

.lyric_area{/*歌詞顯示區域*/height: 300px; /*歌詞區域高度*/overflow: hidden; /*隱藏超出部分*/margin-top: 15px; } #lyric{/*歌詞列表*/line-height: 20px;/*行高，這個值要用在歌詞滾動距離上*/transition-duration: 600ms;/*滾動速度*/} #lyric .lineHigh{/*高亮行*/color: red; }

第二步：播放音樂時讓當前行高亮顯示并向上滾動

解析后的歌詞放在oLRC對象的ms數組中，呈現以下形態：
ms : [
{t: “0.590”, c: “沙漠駱駝 - 展展與羅羅”}
{t: “2.970”, c: “詞：展展與羅羅”}
{t: “4.460”, c: “曲：展展與羅羅”}
{t: “26.450”, c: “我要穿越這片沙漠”}
{t: “28.510”, c: “找尋真的自我”}
{t: “30.500”, c: “身邊只有一匹駱駝陪我”}
… …
]
ms[i].t是歌詞的開始時間，ms[i].c是歌詞內容。
現在歌詞內容已經寫在上面的<ul>列表中了，我們要做的是讓高亮歌詞與播放同步。

var lineNo: 0, //當前行 var C_pos: 6, //C位 var offset: -20, //滾動距離（應等于行高） var audio = document.getElementById("audio");//播放器 var ul = document.getElementById("lyric"); //歌詞容器列表//高亮顯示歌詞當前行及文字滾動控制，行號為lineNo function lineHigh() {var lis = ul.getElementsByTagName("li");//歌詞數組if(lineNo>0){lis[lineNo-1].removeAttribute("class");//去掉上一行的高亮樣式}lis[lineNo].className = "lineHigh";//高亮顯示當前行//文字滾動if(lineNo>C_pos){ul.style.transform = "translateY("+(lineNo-C_pos)*offset+"px)"; //整體向上滾動一行高度} }//滾回到開頭，用于播放結束時 function goback() {document.querySelector("#lyric .lineHigh").removeAttribute("class");ul.style.transform = "translateY(0)";lineNo = 0; }//監聽播放器的timeupdate事件，實現文字與音頻播放同步 audio.ontimeupdate = function () {if(lineNo==oLRC.ms.length)return;var curTime = audio.currentTime; //播放器時間if(parseFloat(oLRC.ms[lineNo].t)<=curTime){lineHigh();//高亮當前行lineNo++;} };//監聽播放器的ended事件，播放結束時回滾歌詞 audio.onended = function () {goback(); //回滾歌詞 };

歌詞與播放同步的關鍵是從播放器獲取當前時間，這需要監聽audio對象的timeupdate事件，該事件在播放位置發生變化時觸發，再從audio對象的currentTime屬性中可取到當前播放時間。
滾動歌詞使用的是CSS的變換函數transform:translateY(長度)，它可以把歌詞容器整體上移指定長度，由于容器外的div標簽設置了overflow: hidden;，所以感覺歌詞在向上滾動了。

總結

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

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