溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用html怎么實現(xiàn)一個滾動歌詞效果？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優(yōu)雅的前端網(wǎng)頁。
操作環(huán)境：windows7系統(tǒng)、html5版，DELL G3電腦。
html制作滾動歌詞的方法：
首先我們創(chuàng)建一個html文件，名字隨便取，比如：index.html,這個簡單，不用多說。不著急開始寫代碼，我們在創(chuàng)建一個css文件，不妨就命名為musicplay.css，js的話我們直接寫道html文件里面方便閱讀和調整，就不創(chuàng)建新的js文件了，但是你要準備jQuery文件，如果沒有也沒關系，待會說解決方法。準備工作結束了，我們開始寫了，首先在標簽里面寫好編碼格式，順便也把我們之前創(chuàng)建的css樣式和jQuery引入，代碼如下：
代碼如下：<head>
<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> <!--注意：這種從網(wǎng)上直接引入的方法需要鏈接網(wǎng)絡，如果你本地下載好了，就把這句話刪除，采用下面的映入方式--> <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腳本事了，我們的設計思路是（分下面幾個函數(shù)完成）：
函數(shù)1：parseLyric()分割歌詞，這一步主要是為了分行顯示歌詞
函數(shù)2：highLight()當前放到的歌詞高亮顯示，為了表示當前唱到那一句了
函數(shù)3：audio.addEventListener（）實時渲染，因為是滾動的，所以要不停的渲染
函數(shù)4：getLineNo()獲取此時的行數(shù)，如果我們快進或快退的時候，歌詞也要跟著我們的調整而改變
函數(shù)5：audio.addEventListener(）播放完回到開始，這個可以不做，沒有太意義，這是為了完善功能解釋好這幾個函數(shù)之后，我直接貼代碼。
<script type="text/javascript"> $(function() {
function parseLyric(text) {
//按行分割歌詞
let lyricArr = text.split('\n'); //console.log(lyricArr)
//0: "[ti:愛在西元前]" "[ar:周杰倫]"...
let result = [];
//新建一個數(shù)組存放最后結果
//遍歷分割后的歌詞數(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 換行符,然后刪除多余空行.即可!// 這里請按照格式放入相應歌詞--結束
let audio = document.querySelector('audio'); let result = parseLyric(text); //執(zhí)行l(wèi)yc解析 // 把生成的數(shù)據(jù)顯示到界面上去
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怎么實現(xiàn)一個滾動歌詞效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
