So erstellen Sie Lauftexte in HTML

So erstellen Sie scrollende Texte in HTML: Schreiben Sie zuerst das Codierungsformat in das Tag, führen Sie den CSS-Stil und jQuery ein und platzieren Sie dann den Player. Der Code lautet [87a5bdcc4f0b7419bbb38dcb208c14b1].

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer

So erstellen Sie scrollende Liedtexte in HTML:

Zuerst erstellen wir eine HTML-Datei mit einem zufälligen Namen , wie zum Beispiel: index.html, das ist natürlich nicht überstürzt. Wir können es auch direkt als „musicplay.css“ bezeichnen Fügen Sie es zum einfachen Lesen und Anpassen in die HTML-Datei ein, ohne eine neue jQuery-Datei erstellen zu müssen. Es spielt keine Rolle, ob Sie eine haben. Wir werden später über die Lösung sprechen. Nachdem die Vorbereitung abgeschlossen ist, beginnen wir mit dem Schreiben des Codierungsformats in das Tag und fügen auch das zuvor erstellte CSS hinzu. Der Code lautet wie folgt:

Der Code lautet wie folgt: 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>

Nachdem der Head-Inhalt geschrieben wurde, beginnen wir mit dem Schreiben des Hauptteils. Zuerst verwenden wir den Placement-Player, der das Etikett darstellt. Der Code lautet wie folgt:

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

Gehen Sie einfach-->Dann schreiben Sie a Box, der Code lautet wie folgt:

Der CSS-Code der Box lautet wie folgt (Funktionen siehe Hinweise):

Der nächste Schritt ist das JS-Skript (ergänzt durch die folgenden Funktionen):

Funktion 1: parseLyric() teilt den Liedtext in einzelne Zeilen auf.

Funktion 2: highLight() hebt den aktuell platzierten Liedtext hervor, um anzuzeigen, welcher Satz gerade gesungen wird.

Funktion 3: Audio .addEventListener() wird in Echtzeit gerendert. Funktion 4: getLineNo() ruft die Anzahl der Zeilen ab. Wenn wir vor- oder zurückspulen, folgt uns auch der Text Aufgrund von Anpassungen

Funktion 5: audio.addEventListener() kehrt nach dem Abspielen zum Anfang zurück. Es macht nicht viel Sinn, die Funktion zu verbessern Ich werde den Code direkt veröffentlichen.

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

Verwandte Lernempfehlungen:

HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Lauftexte in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!