使用html怎么实现一个滚动歌词效果

使用html怎么实现一个滚动歌词效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为湖北企业提供专业的网站设计制作、成都网站建设，湖北网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

操作环境：windows7系统、html5版，DELL G3电脑。

html制作滚动歌词的方法：

首先我们创建一个html文件，名字随便取，比如：index.html,这个简单，不用多说。不着急开始写代码，我们在创建一个css文件，不妨就命名为musicplay.css，js的话我们直接写道html文件里面方便阅读和调整，就不创建新的js文件了，但是你要准备jQuery文件，如果没有也没关系，待会说解决方法。准备工作结束了，我们开始写了，首先在标签里面写好编码格式，顺便也把我们之前创建的css样式和jQuery引入，代码如下：

代码如下：

head内容写好后，我们开始写body里面的了，首先我们用放置播放器，就是标签，代码如下：

去即可 -->接着写一个盒子，代码如下：

盒子的css代码如下（功能见备注）：

接下来就是js脚本事了，我们的设计思路是（分下面几个函数完成）：

函数1：parseLyric()分割歌词，这一步主要是为了分行显示歌词

函数2：highLight()当前放到的歌词高亮显示，为了表示当前唱到那一句了

函数3：audio.addEventListener（）实时渲染，因为是滚动的，所以要不停的渲染

函数4：getLineNo()获取此时的行数，如果我们快进或快退的时候，歌词也要跟着我们的调整而改变

函数5：audio.addEventListener(）播放完回到开始，这个可以不做，没有太意义，这是为了完善功能解释好这几个函数之后，我直接贴代码。

    $(function() {       
 function parseLyric(text) { 
 //按行分割歌词            
 let lyricArr = text.split('\n');            //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 = $("
");        
for (let i = 0; i < result.length; i++) {            let $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");        
});    
});    

看完上述内容，你们掌握使用html怎么实现一个滚动歌词效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享名称：使用html怎么实现一个滚动歌词效果
分享路径：http://shouzuofang.com/article/jjdhsp.html