html制作滚动歌词的方法：首先在标签里面写好编码格式，引入css样式和jQuery；然后放置播放器，代码为【】。

本教程操作环境：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 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");

});

});