html制作滾動歌詞的方法：首先在標簽里面寫好編碼格式，引入css樣式和jQuery；然后放置播放器，代碼為【】。

本教程操作環境：windows7系統、html5版，DELL G3電腦。

html制作滾動歌詞的方法：

首先我們創建一個html文件，名字隨便取，比如：index.html,這個簡單，不用多說。不著急開始寫代碼，我們在創建一個css文件，不妨就命名為musicplay.css，js的話我們直接寫道html文件里面方便閱讀和調整，就不創建新的js文件了，但是你要準備jQuery文件，如果沒有也沒關系，待會說解決方法。準備工作結束了，我們開始寫了，首先在標簽里面寫好編碼格式，順便也把我們之前創建的css樣式和jQuery引入，代碼如下：

代碼如下：

愛在西元前-周杰倫

head內容寫好后，我們開始寫body里面的了，首先我們用放置播放器，就是標簽，代碼如下：

去即可 -->接著寫一個盒子，代碼如下：

盒子的css代碼如下(功能見備注)：

接下來就是js腳本事了，我們的設計思路是(分下面幾個函數完成)：

函數1：parseLyric()分割歌詞，這一步主要是為了分行顯示歌詞

函數2：highLight()當前放到的歌詞高亮顯示，為了表示當前唱到那一句了

函數3：audio.addEventListener()實時渲染，因為是滾動的，所以要不停的渲染

函數4：getLineNo()獲取此時的行數，如果我們快進或快退的時候，歌詞也要跟著我們的調整而改變

函數5：audio.addEventListener()播放完回到開始，這個可以不做，沒有太意義，這是為了完善功能解釋好這幾個函數之后，我直接貼代碼。

function parseLyric(text) {

//按行分割歌詞

let lyricArr = text.split('\n'); //console.log(lyricArr)

//0: "[ti:愛在西元前]" "[ar:周杰倫]"...

let result = [];

//新建一個數組存放最后結果

//遍歷分割后的歌詞數組，將格式化后的時間節點，歌詞填充到result數組

for (i = 0; i < lyricArr.length; i++) { let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g);

//正則匹配播放時間

let lineLyric = "";

if (lyricArr[i].split(playTimeArr).length > 0) {

lineLyric = lyricArr[i].split(playTimeArr); }

if (playTimeArr != null) { for (let j = 0; j < playTimeArr.length; j++) {

let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":"); //數組填充

result.push({ time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4), content: String(lineLyric).substr(1) });

}

}

}

return result;

}

// 這里請按照格式放入相應歌詞--開始

// 格式可能看著很復雜,其實是根據lrc歌詞文件換句前加入\n 換行符,然后刪除多余空行.即可!// 這里請按照格式放入相應歌詞--結束

let audio = document.querySelector('audio'); let result = parseLyric(text); //執行lyc解析 // 把生成的數據顯示到界面上去

let $ul = $("

");

for (let i = 0; i < result.length; i++) { let $li = $("

").text(result[i].content); $ul.append($li);

}

$(".bg").append($ul);

let lineNo = 0;

// 當前行歌詞

let preLine =1; // 當播放6行后開始滾動歌詞

let lineHeight = -30; // 每次滾動的距離 // 滾動播放 歌詞高亮 增加類名active

function highLight() {

let $li = $("li"); $li.eq(lineNo).addClass("active").siblings().removeClass("active");

if (lineNo > preLine) { $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });

}

}

highLight();

// 播放的時候不斷渲染

audio.addEventListener("timeupdate", function() {

if (lineNo == result.length) return; if ($("li").eq(0).hasClass("active")) { $("ul").css("top", "0");

}

lineNo =getLineNo(audio.currentTime); highLight();

lineNo++; });

// 當快進或者倒退的時候，找到最近的后面那個

result[i].time

function getLineNo(currentTime) { if (currentTime >=parseFloat(result[lineNo].time)) { // 快進

for (let i = result.length - 1; i >= lineNo; i--) {

if (currentTime >= parseFloat(result[i].time)) { return i;

}

}

} else {

// 后退

for (let i = 0; i <= lineNo; i++) { if (currentTime <= parseFloat(result[i].time)) { return i - 1;

}

}

}

}

//播放結束自動回到開頭

audio.addEventListener("ended", function() { lineNo = 0;

highLight();

audio.play();

$("ul").css("top", "0");

});

});