前 言
上周更新了一篇音樂播放器的博客，因為時間原因，並不完整，有人評論我能不能實現同步顯示歌詞，今天就來跟大家分享一下，如何實現歌詞的同步顯示。
這次我們就不寫過多的CSS樣式了，單純的實現歌詞的同步顯示，先看一下效果。
上周我們提到的audio標簽，這次我們直接在audio標簽中添加controls屬性，這樣我們的音樂播放器就自帶工具欄了，也就是頂部的那一塊，雖然不是太美觀，但是麻雀雖小五臟俱全，基本功能都可以實現，當然，大家可以自己寫樣式~
<audio controls> <source src="auto/趙雷 - 成都.mp3" type="audio/mpeg"/> </audio> <span class="wordsbtn" onclick="showWords()">詞</span>
1解析歌詞
首先我們需要下載一個lyric格式的歌詞，這一步很重要，因為在同步歌詞的時候需要通過時間來判斷顯示哪一句。我們以《成都》為例，把它放到預格式標簽中~
<pre id="song1"> [ti:成都] [ar:趙雷] [al:無法長大] [by:0] [offset:0] [00:01.34]成都 [00:02.09] [00:03.96]作詞：趙雷 [00:03.96]作曲：趙雷 [00:05.99]編曲：趙雷,喜子 [00:09.04]演唱：趙雷 [00:12.90] [00:17.65]讓我掉下眼淚的 [00:21.57]不止昨夜的酒 [00:25.82]讓我依依不舍的 [00:29.62]不止你的溫柔 [00:33.78]余路還要走多久 [00:37.64]你攥着我的手 [00:41.63]讓我感到為難的 [00:45.47]是掙扎的自由 [00:49.20] [00:51.90]分別總是在九月 [00:55.38]回憶是思念的愁 [00:59.46]深秋嫩綠的垂柳 [01:03.32]親吻着我額頭 [01:07.31]在那座陰雨的小城里 [01:11.44]我從未忘記你 [01:15.56]成都 帶不走的 只有你 [01:21.76] [01:22.81]和我在成都的街頭走一走 [01:31.25]直到所有的燈都熄滅了也不停留 [01:38.88]你會挽着我的衣袖 [01:42.67]我會把手揣進褲兜 [01:46.56]走到玉林路的盡頭 [01:50.45]坐在小酒館的門口 [01:55.65] [02:30.35]分別總是在九月 [02:34.31]回憶是思念的愁 [02:38.17]深秋嫩綠的垂柳 [02:42.48]親吻着我額頭 [02:46.66]在那座陰雨的小城里 [02:50.34]我從未忘記你 [02:53.78]成都 帶不走的 只有你 [03:00.95] [03:02.38]和我在成都的街頭走一走 [03:10.13]直到所有的燈都熄滅了也不停留 [03:18.32]你會挽着我的衣袖 [03:21.99]我會把手揣進褲兜 [03:25.99]走到玉林路的盡頭 [03:29.79]坐在小酒館的門口 [03:36.36] [03:38.40]和我在成都的街頭走一走 [03:46.45]直到所有的燈都熄滅了也不停留 [03:54.27]和我在成都的街頭走一走 [04:02.30]直到所有的燈都熄滅了也不停留 [04:10.29]你會挽着我的衣袖 [04:13.57]我會把手揣進褲兜 [04:17.56]走到玉林路的盡頭 [04:21.77]坐在(走過)小酒館的門口 [04:27.72] [04:36.02]和我在成都的街頭走一走 [04:43.67]直到所有的燈都熄滅了也不停留 [04:51.93] </pre>
這樣所有的HTML代碼部分就已經全部完成了，接下來就是我們的JS……
首先是解析歌詞，這是首先要做的准備工作，同樣也是最重要的一步，解析步驟大體如下：
①當頁面加載完的時候，獲取到歌詞
②將歌詞通過換行符將所有歌詞放到數組中
③通過for循環，循環遍歷每一行歌詞，將歌詞前不是時間的過濾掉
④由於audio標簽的currentTime是以秒來記數，所以我們需要將歌詞時間改為秒
⑤將每行歌詞秒數與歌詞內容封裝成對象，放入數組中
//全局的歌詞數據 var wordsArray=[]; window.onload=function(){ //獲取歌詞並且截取 var content=document.getElementById("song1").innerHTML; //通過換行符來分割出所有的文本\n var arrays=content.split("\n"); //過濾掉前幾個不帶時間的數據 for(var i=0;i<arrays.length;i++){ var temp=arrays[i]; //根據分號分割過濾數據 var tempNum=temp.split(":")[0].replace("[",""); //是合法歌詞的時候 if(!isNaN(tempNum)){ //重新根據]來分割 ，分離數據 var timeArray=temp.split("]")[0].replace("[","").split(":");//33:44 //計算分鍾數 var min=parseInt(timeArray[0]); //計算總秒數 var second=parseFloat(timeArray[1])+min*60; //獲取對應的歌詞內容 var content=temp.split("]")[1]; //封裝成歌詞對象放入數組 var obj={ time:second, content:content }; wordsArray.push(obj); } } }
這樣，我們的准備工作就完成了~
2歌詞滾動
點擊span播放按鈕的時候，觸發一個showWords函數，將顯示歌詞的div顯示到界面中。將存在數組中的對象的時間通過與當前播放時間currentTime進行對比，當當前播放時間大於數組中對象的時間，那么久顯示這一句的歌詞。
具體實現：
①獲取到顯示歌詞的div將div顯示
②設置一個定時器，每秒比較一次(將當前播放時間與解析出的數組中的對象時間進行比較，如果播放的秒數大於數組中的秒數，播放前一句歌詞)
function showWords(){ var words=document.getElementsByClassName("words")[0]; //控制歌div顯示或者隱藏 if(words.style.display=="none"){ words.style.display="block"; }else{ words.style.display="none"; } //開始獲取歌詞並且展示到歌詞框 var play=document.getElementsByTagName("audio")[0]; setInterval(function(){ var str= getWordsByTime(play.currentTime); document.getElementsByClassName("words")[0].innerHTML=str; },1000); }
//根據時間獲取當前應該顯示哪一句話 function getWordsByTime(second){ for(var i in wordsArray){ var obj=wordsArray[i]; if(second>obj.time){ //播放時候的秒數大於數組中的秒數的時候，播放的應該是前一句歌詞 continue; }else{ return wordsArray[i-1].content; } } }
這樣，同步顯示歌詞的功能就完成了啦~