HTML로 스크롤 가사를 만드는 방법

HTML로 스크롤 가사를 만드는 방법: 먼저 태그에 인코딩 형식을 작성하고 CSS 스타일과 jQuery를 도입한 다음 플레이어를 배치합니다. 코드는 [

이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터

html로 스크롤 가사를 만드는 방법:

먼저 임의의 이름을 가진 html 파일을 만듭니다. index.html과 같은 간단한 내용이므로 서두르지 말고 CSS 파일 이름을 js로 지정하는 것이 좋습니다. 쉽게 읽고 조정할 수 있도록 html 파일에 작성하세요. js 파일을 새로 만들지 않아도 되지만, jQuery 파일이 없어도 문제가 되지 않습니다. 이제 준비가 끝났으니 작성을 시작합니다. 먼저 태그에 인코딩 형식을 작성하고 앞서 만든 CSS도 추가합니다. 코드는 다음과 같습니다.

코드는 다음과 같습니다. :

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

헤드 내용이 작성된 후 본문 작성을 시작합니다. 먼저 레이블인 배치 플레이어를 사용하며 코드는 다음과 같습니다.

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

그냥 이동->그런 다음 작성합니다. 상자의 코드는 다음과 같습니다.

상자의 CSS 코드는 다음과 같습니다(함수 참고 사항 참조).

다음 단계는 js 스크립트입니다(다음 함수로 완성됨).

기능 1: parLyric()은 가사를 분할합니다. 이 단계는 주로 가사를 별도의 줄에 표시하는 것입니다.

기능 2: highLight()는 현재 노래되는 문장을 나타내기 위해 현재 배치된 가사를 강조 표시합니다. audio.addEventListener()는 실시간으로 렌더링되므로 계속해서 렌더링해야 합니다. 함수 4: getLineNo()는 이때 빨리 감기 또는 되감기하면 가사도 따라옵니다. 조정으로 인해 변경됨

함수 5: audio.addEventListener() 이 기능을 설명하면 별 의미가 없습니다. 코드는 직접 올려드리겠습니다

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

관련 학습 추천:

html 동영상 튜토리얼

위 내용은 HTML로 스크롤 가사를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!