使用html怎么實現(xiàn)一個滾動歌詞效果

使用html怎么實現(xiàn)一個滾動歌詞效果？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為湖北企業(yè)提供專業(yè)的網(wǎng)站設計制作、成都網(wǎng)站建設，湖北網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

html是什么

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)一個滾動歌詞效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁名稱：使用html怎么實現(xiàn)一個滾動歌詞效果
轉載源于：http://bm7419.com/article38/jjdhsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、App設計、商城網(wǎng)站、網(wǎng)站收錄、移動網(wǎng)站建設、網(wǎng)站內鏈

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設網(wǎng)站維護公司