2.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #000;
color: #666;
text-align: center;
}
audio {
width: 500px;
margin-bottom: 50px;
}
.container {
/* li的高度的倍数，避免文字处于container边框上，展示一半文字 */
height: 300px;
background-color: yellowgreen;
overflow-y: hidden;
}
ul {
list-style: none;
padding: 0;
margin: 0;
transition: all 0.3s;
}
ul > li {
height: 30px;
line-height: 30px;
transition: all 0.2s;
}
ul > li.active {
color: #fff;
transform: scale(1.3);
}
</style>
</head>
<body>
<audio controls></audio>
<div class="container">
<ul></ul>
</div>
<script>
(async function () {
const lyricData = [
"[00:01.06]难念的经",
"[00:03.95]演唱：周华健",
"[00:06.78]",
"[00:30.96]笑你我枉花光心计",
"[00:34.15]爱竟逐镜花那美丽",
"[00:36.75]怕幸运会转眼远逝",
"[00:39.32]为贪痴喜恶怒着迷",
"[00:41.99]责你我太贪功恋",
"[00:44.48]怪大地宗生太美丽",
"[00:47.00]悔旧日太执信约誓",
"[00:49.66]为悲欢哀怨妒着迷",
"[00:52.56]啊 舍不得璀璨俗世",
"[00:57.66]啊 躲不开痴恋的欣慰",
];
const sizeData = {
liHeight: 30,
containerHeight: 300,
};
const ul = document.querySelector("ul");
const audio = document.querySelector("audio");
let lyricList = [];
function init() {
lyricList = lyricData.map((it) => {
const parts = it.split("]");
const timeParts = parts[0].replace("[", "").split(":");
return {
time: +timeParts[0] * 60 + +timeParts[1],
words: parts[1],
};
});
ul.innerHTML = lyricList
.map((it) => {
return `<li>${it.words}</li>`;
})
.join("");
}
await init();
audio.addEventListener("timeupdate", function () {
setStatus(this.currentTime);
});
function setStatus(time) {
// 清除之前高亮的li；
const activeLi = document.querySelector(".active");
activeLi && activeLi.classList.remove("active");
// 提前一点时间让li高亮，否则同时高亮且加上动画时间会觉得有延迟；
time += 0.3;
// 根据当前播放的时间找到对应的li，设置高亮；
const index =
lyricList.findIndex((it) => {
return it.time > time;
}) - 1;
if (index < 0) return;
ul.children[index].classList.add("active");
// 滚动距离等于当前li的高度乘以当前li的个数，再加一个li高度的一半，就是当前li的中间位置；
let top =
sizeData.liHeight * index +
sizeData.liHeight / 2 -
sizeData.containerHeight / 2;
// 沿Y轴向上负数滚动；
top = -top;
if (top > 0) top = 0;
ul.style.transform = `translateY(${top}px)`;
}
setTimeout(() => {
setStatus(37);
}, 1000);
setTimeout(() => {
setStatus(40);
}, 2000);
setTimeout(() => {
setStatus(42);
}, 3000);
setTimeout(() => {
setStatus(0);
}, 4000);
})();
</script>
</body>
</html>
第一个li为top0，默认在container第一个位置；只需求出红色的高度
