How to create scrolling lyrics in html

htmlHow to make scrolling lyrics: First write the encoding format in the tag, introduce css style and jQuery; then place the player, the code is [20729b6e20cfea32217b9cde3c289604】.

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

html How to make scrolling lyrics:

First we create an html file, with a random name, such as: index.html, this is simple, needless to say. Don’t rush to start writing code, we are creating a css For the file, you might as well name it musicplay.css. For js, we can directly write it into the html file for easy reading and adjustment. We will not create a new js file, but you need to prepare a jQuery file. If you don’t have it, it doesn’t matter. I will talk about the solution later. . The preparation work is over, and we start writing. First, write the encoding format in the tag, and by the way, introduce the css style and jQuery we created before. The code is as follows:

The code is as follows: 93f0f5c25f18dab9d176bd4f6de5d30e

<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>

After the head content is written, we start to write the body. First we use the placement player, which is the label. The code is as follows:

<center> 
<audio autoplay="autoplay src="爱在西元前.mp3" controls></audio>
</center><!--这里修改播放器里面播放的音乐，这里只有简单的控制，没做上一曲，下一曲的功能 ，autoplay="autoplay"属性为自动播放，不想让自动播放删去即可 -->

Just go there-->Then write a Box, the code is as follows:

The css code of the box is as follows (see the remarks for the function):

The next step is the js script. Our design idea is (completed by the following functions):

Function 1: parseLyric() splits the lyrics. This step is mainly to display the lyrics in separate lines.

Function 2: highLight() highlights the lyrics currently placed in order to indicate where the current song is. One sentence

Function 3: audio.addEventListener() renders in real time, because it is scrolling, so it must be rendered continuously

Function 4: getLineNo() gets the number of lines at this time, if When we fast forward or rewind, the lyrics will also change according to our adjustments

Function 5: audio.addEventListener() returns to the beginning after playing. You don’t need to do this. It doesn’t make much sense. This is for After perfecting the functions and explaining these functions, I will post the code directly.

<script type="text/javascript">    $(function() {       
 function parseLyric(text) { 
 //按行分割歌词            
 let lyricArr = text.split(&#39;\n&#39;);            //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>

Related learning recommendations: html video tutorial

The above is the detailed content of How to create scrolling lyrics in html. For more information, please follow other related articles on the PHP Chinese website!