html製作滾動歌詞的方法：首先在標籤裡面寫好編碼格式，引入css樣式和jQuery；然後放置播放器，代碼為【
本教學操作環境：windows7系統、html5版，DELL G3電腦。
#html製作滾動歌詞的方法：
首先我們創建一個html文件，名字隨便取，例如：index.html,這個簡單，不用多說。不著急開始寫程式碼，我們在創建一個css文件，不妨就命名為musicplay.css，js的話我們直接寫道html文件裡面方便閱讀和調整，就不創建新的js文件了，但是你要準備jQuery文件，如果沒有也沒關係，待會說解決方法。準備工作結束了，我們開始寫了，首先在標籤裡面寫好編碼格式，順便也把我們之前創建的css樣式和jQuery引入，代碼如下：
代碼如下：
<meta charset="UTF-8"><title>爱在西元前-周杰伦 </title><link type="text/css" rel="stylesheet" href="css/musicplay.css" /> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!--注意：这种从网上直接引入的方法需要链接网络，如果你本地下载好了，就把这句话删除，采用下面的映入方式--> <script src="js/jquery-1.9.1.min.js"></script></head>
head內容寫好後，我們開始寫body裡面的了，首先我們用放置播放器，就是標籤，代碼如下：
<center> <audio autoplay="autoplay src="爱在西元前.mp3" controls></audio> </center><!--这里修改播放器里面播放的音乐，这里只有简单的控制，没做上一曲，下一曲的功能 ，autoplay="autoplay"属性为自动播放，不想让自动播放删去即可 -->
去即可-->接著寫一個盒子，程式碼如下：
盒子的css程式碼如下（功能見備註）：
接下來就是js腳本事了，我們的設計想法是（分下面幾個函數完成）：
函數1：parseLyric()分割歌詞，這一步主要是為了分行顯示歌詞
函數2：highLight()目前放到的歌詞高亮顯示，為了表示當前唱到那一句了
函數3：audio.addEventListener（）即時渲染，因為是滾動的，所以要不停的渲染
函數4：getLineNo()取得此時的行數，如果我們快轉或快轉的時候，歌詞也要跟著我們的調整改變
函數5：audio.addEventListener(）播放完回到開始，這個可以不做，沒有太意義，這是為了完善功能解釋好這幾個函數之後，我直接貼程式碼。
<script type="text/javascript"> $(function() {
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 = $("<ul></ul>");
for (let i = 0; i < result.length; i++) { let $li = $("<li></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");
});
});
</script>相關學習推薦：html影片教學
以上是html如何製作滾動歌詞的詳細內容。更多資訊請關注PHP中文網其他相關文章！
