實現歌詞同步滾動效果，首先要用audio標簽引入音頻

<div id="h_center1"><span>當前播放：</span><span>大魚海棠</span><audio id="now_music" src="雙笙 - 大魚.mp3"></audio><img src="picture/former.jpg"/><img src="picture/stop.jpg" class="clickToStop" width="21" height="58"/><img src="picture/next.jpg"/></div>

并且也要將歌詞文件寫入textarea 文本域內并隱藏，然后在獲取歌詞時放入指定位置

<textarea id="lrc_content" name="textfield" cols="70" rows="10" style="display:none;">[ti:大魚][ar:王若伊][al:大魚][ly:尹約][mu:錢雷][ma:][pu:][by:ttpod][total:278752][offset:0][00:00.410]大魚 - 王若伊[00:01.410]作詞：尹約[00:02.310]作曲：錢雷[00:03.161][00:44.447]海浪無聲將夜幕深深淹沒[00:51.200]漫過天空盡頭的角落[00:57.995]大魚在夢境的縫隙里游過[01:04.848]凝望你沉睡的輪廓[01:10.898]看海天一色 聽風起雨落[01:17.705]執子手吹散蒼茫茫煙波[01:24.506]大魚的翅膀 已經太遼闊[01:32.112]我松開時間的繩索[01:38.017]怕你飛遠去[01:41.620]怕你離我而去[01:45.173]更怕你永遠停留在這里[01:51.876]每一滴淚水[01:55.428]都向你流淌去[01:59.623]倒流進天空的海底[02:05.201][02:20.568]海浪無聲將夜幕深深淹沒[02:27.118]漫過天空盡頭的角落[02:34.029]大魚在夢境的縫隙里游過[02:40.733]凝望你沉睡的輪廓[02:47.051]看海天一色 聽風起雨落[02:53.654]執子手吹散蒼茫茫煙波[03:00.637]大魚的翅膀 已經太遼闊[03:08.087]我松開時間的繩索[03:14.187]看你飛遠去 看你離我而去[03:21.039]原來你生來就屬于天際[03:27.889]每一滴淚水 都向你流淌去[03:35.540]倒流回最初的相遇</textarea><ul id="text" style="overflow: hidden;"></ul>

JS實現

首先要把獲取到的歌詞解析為對象數組，并且放入指定位置，并且溢出隱藏
(t.split(“:”)[0] * 60 + parseFloat(t.split(“:”)[1])).toFixed(3)這里是要把原來的mm:ss的時間格式改為秒

var medisArray = new Array(); // 定義一個新的數組 function createLrc () {var medis = document.getElementById('lrc_content').innerText;var medises = medis.split("\n"); // 用換行符拆分獲取到的歌詞$.each(medises, function (i, item) { // 遍歷medises，并且將時間和文字拆分開，并push進自己定義的數組，形成一個對象數組var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));medisArray.push({t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),c: item.substring(item.indexOf("]") + 1, item.length)});});var ul = $("#text");// 遍歷medisArray，并且生成li標簽，將數組內的文字放入li標簽$.each(medisArray, function (i, item) {var li = $("<li style='list-style: none;'>");li.html(item.c);ul.append(li);}); } createLrc();

實現文字高亮滾動

var fraction = 0.5; var topNum = 0; function lineHeight(lineno){var ul = $("#text");var $ul = document.getElementById('text');// 令正在唱的那一行高亮顯示if (lineno > 0) {$(ul.find("li").get(topNum + lineno - 1)).removeClass("lineheight");}var nowline = ul.find("li").get(topNum + lineno);$(nowline).addClass("lineheight");// 實現文字滾動var _scrollTop;$ul.scrollTop = 0;if ($ul.clientHeight * fraction > nowline.offsetTop) {_scrollTop = 0;} else if (nowline.offsetTop > ($ul.scrollHeight - $ul.clientHeight * (1 - fraction))) {_scrollTop = $ul.scrollHeight - $ul.clientHeight;} else {_scrollTop = nowline.offsetTop - $ul.clientHeight * fraction;}//以下聲明歌詞高亮行固定的基準線位置成為 “A”if ((nowline.offsetTop - $ul.scrollTop) >= $ul.clientHeight * fraction) {//如果高亮顯示的歌詞在A下面，那就將滾動條向下滾動，滾動距離為 當前高亮行距離頂部的距離-滾動條已經卷起的高度-A到可視窗口的距離$ul.scrollTop += Math.ceil(nowline.offsetTop - $ul.scrollTop - $ul.clientHeight * fraction);} else if ((nowline.offsetTop - $ul.scrollTop) < $ul.clientHeight * fraction && _scrollTop != 0) {//如果高亮顯示的歌詞在A上面，那就將滾動條向上滾動，滾動距離為 A到可視窗口的距離-當前高亮行距離頂部的距離-滾動條已經卷起的高度$ul.scrollTop -= Math.ceil($ul.clientHeight * fraction - (nowline.offsetTop - $ul.scrollTop));} else if (_scrollTop == 0) {$ul.scrollTop = 0;} else {$ul.scrollTop += $(ul.find('li').get(0)).height();} }

監聽audio 的timeupdate 事件，實現文字與音頻的同步
如果medisArray[lineNo].t <=T && T<= medisArray[lineNo + 1].t，那么行號為lineNo的這行歌詞就需要高亮

var lineNo = 10; audio.ontimeupdate = function () {if (lineNo == medisArray.length - 1 && audio.currentTime.toFixed(3) >= parseFloat(medisArray[lineNo].t)) {lineHeight(lineNo);}if (parseFloat(medisArray[lineNo].t) <= audio.currentTime.toFixed(3) &&audio.currentTime.toFixed(3) <= parseFloat(medisArray[lineNo + 1].t)) {lineHeight(lineNo);lineNo++;} };

總結

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

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