<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LRC</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
div {
340px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
ul {
transition-duration: 600ms;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
li.on {
color: red;
}
audio {
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<audio id="audio" src="js/1.mp3" controls="controls" autoplay="true"></audio>
<ul id="lrclist" style="transform: translateY(250px);"><!-- 保证歌词在正中间 -->
</ul>
</div>
<script>
let lrcJSON = [
"[00:03.00]洋葱",
"[00:06.00]演唱：平安",
"[00:09.00]",
"[00:11.38]如果你眼神能够为我片刻的降临"];
let lrcTime = [];//歌词对应的时间数组
let ul = $("#lrclist")[0];//获取ul
let i = 0;
$.each(lrcJSON, function (key, value) {//遍历lrc
ul.innerHTML += "<li><p>" + value.substring(10) + "</p></li>";//ul里填充歌词
lrcTime[i++] = parseFloat(value.substring(1, 3)) * 60 + parseFloat(value.substring(4, 10));//00:00.000转化为00.000格式
});
lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后一句
let $li = $("#lrclist>li");//获取所有li
let currentLine = 0;//当前播放到哪一句了
let currentTime;//当前播放的时间
let audio = document.getElementById("audio");
let ppxx;//保存ul的translateY值
audio.ontimeupdate = function () {//audio时间改变事件
currentTime = audio.currentTime;
for (j = currentLine, len = lrcTime.length; j < len; j++) {
if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) {
currentLine = j;
ppxx = 250 - (currentLine * 32);
ul.style.transform = "translateY(" + ppxx + "px)";
$li.get(currentLine - 1).className = "";
console.log("on" + currentLine);
$li.get(currentLine).className = "on";
break;
}
}
};
audio.onseeked = function () {//audio进度更改后事件
currentTime = audio.currentTime;
console.log(" off" + currentLine);
$li.get(currentLine).className = "";
for (k = 0, len = lrcTime.length; k < len; k++) {
if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) {
currentLine = k;
break;
}
}
};
</script>
</body>
</html>