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

本教程操作環(huán)境：windows7系統(tǒng)、html5版，DELL G3電腦。

html制作滾動歌詞的方法：

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

代碼如下：

愛在西元前-周杰倫

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

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

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

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

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

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

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

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

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

function parseLyric(text) {

//按行分割歌詞

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

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

let result = [];

//新建一個數(shù)組存放最后結(jié)果

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

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(":"); //數(shù)組填充

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

}

}

}

return result;

}

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

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

let audio = document.querySelector('audio'); let result = parseLyric(text); //執(zhí)行l(wèi)yc解析 // 把生成的數(shù)據(jù)顯示到界面上去

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;

}

}

}

}

//播放結(jié)束自動回到開頭

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

highLight();

audio.play();

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

});

});

總結(jié)

以上是生活随笔為你收集整理的php中文歌词,html如何制作滚动歌词的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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