JS之歌词滚动案例

让我为大家带来一个歌词滚动的案例吧！
详细的介绍都在代码块中
我很希望大家可以自己动手尝试一下，如果需要晴天的mp3音频文件可以私信我
上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>歌词滚动</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;transition: all 0.5s;}body {background-color: #000;}audio {display: block;margin: 50px auto;width: 400px;}.container {text-align: center;color: #fff;height: 400px;overflow: hidden;}ul li {height: 40px;line-height: 40px;transition: all 0.5s;}/* 对应的歌词设置active */.active {color: red;/* 建议使用transform font-size会造成reflow重新布局 效率变低 *//* transform不在渲染主线程上执行 而是在合成线程上执行 就不会造成reflow */transform: scale(1.5);}</style>
</head>
<body><!-- 晴天音频 --><audio src="周杰伦-晴天.mp3" controls></audio><!-- 大容器 --><div class="container"><!-- 容器需要装歌词 --><ul></ul></div>
</body>
<script>// 歌词let lrc = `[00:00.71]晴天 - 周杰伦
[00:28.84]故事的小黄花
[00:32.34]从出生那年就飘着
[00:35.85]童年的荡秋千
[00:39.41]随记忆一直晃到现在
[00:42.77]rui sou sou xi dou xi la
[00:45.50]sou la xi xi xi xi la xi la sou
[00:49.41]吹着前奏望着天空
[00:52.60]我想起花瓣试着掉落
[00:56.10]为你翘课的那一天
[00:58.29]花落的那一天
[01:00.14]教室的那一间
[01:01.79]我怎么看不见
[01:03.61]消失的下雨天
[01:05.38]我好想再淋一遍
[01:09.51]没想到失去的勇气我还留着
[01:15.72]好想再问一遍
[01:17.47]你会等待还是离开
[01:24.46]刮风这天我试过握着你手
[01:30.18]但偏偏雨渐渐大到我看你不见
[01:38.50]还要多久我才能在你身边
[01:44.93]等到放晴的那天也许我会比较好一点
[01:52.41]从前从前有个人爱你很久
[01:58.07]但偏偏风渐渐把距离吹得好远
[02:06.44]好不容易又能再多爱一天
[02:12.81]但故事的最后你好像还是说了拜拜
[02:33.93]为你翘课的那一天
[02:36.39]花落的那一天
[02:38.13]教室的那一间
[02:39.84]我怎么看不见
[02:41.55]消失的下雨天
[02:43.31]我好想再淋一遍
[02:47.39]没想到失去的勇气我还留着
[02:53.39]好想再问一遍
[02:55.49]你会等待还是离开
[03:02.46]刮风这天我试过握着你手
[03:08.12]但偏偏雨渐渐大到我看你不见
[03:16.54]还要多久我才能在你身边
[03:23.10]等到放晴的那天也许我会比较好一点
[03:30.49]从前从前有个人爱你很久
[03:36.26]但偏偏风渐渐把距离吹得好远
[03:44.48]好不容易又能再多爱一天
[03:51.05]但故事的最后你好像还是说了拜拜
[03:57.65]刮风这天我试过握着你手
[04:01.45]但偏偏雨渐渐大到我看你不见
[04:04.98]还要多久我才能够在你身边
[04:08.64]等到放晴那天也许我会比较好一点
[04:12.34]从前从前有个人爱你很久
[04:15.40]但偏偏雨渐渐把距离吹得好远
[04:19.05]好不容易又能再多爱一天
[04:22.42]但故事的最后你好像还是说了吧`// 获取audioconst audio = document.querySelector("audio")// 获取容器const container = document.querySelector(".container")// 获取ulconst ul = document.querySelector("ul")// 第一步渲染页面，我们需要用到split \n换行切割 记住是\n 不是/nconst lrcArr = lrc.split("\n")// console.log(lrcArr);// 准备好一个数组接收const resultArr = []// 因为我们是[00:00:00]这样的形式我们需要继续切割for (let i = 0; i < lrcArr.length; i++) {const lrcData = lrcArr[i].split("]")// 我们取到lrcData[0]与lrcData[1]// 获取到 00:00:00这样的字符串const times = lrcData[0].slice(1)// 声明一个对象 我们把时间与歌词依次存入const objLrc = {// 时间 不过我们需要处理一下时间 把00:00:00这样的格式转换为秒seconds: parseTime(times),// 歌词lrc: lrcData[1]}// 添加到resultArr中resultArr.push(objLrc)}// 处理时间转换为秒function parseTime(times) {// 切割times 用:切割let timesArr = times.split(":")// console.log(timesArr);// 把下标为0的分钟转换为秒 但要注意 当前时间为字符串型 我们需要转换为数字型// 介绍一下+ 这个是数值中的隐式转换return +timesArr[0] * 60 + +timesArr[1]}// 渲染页面function createLis() {for (let i = 0; i < resultArr.length; i++) {let li = document.createElement("li")li.innerHTML = resultArr[i].lrcul.appendChild(li)}}createLis()// 获取到下标function getIndex() {// 获取音频的当前时间let current = audio.currentTimefor (let i = 0; i < resultArr.length; i++) {// 判断 如果当前时间小于seconds 下标为 i - 1if (current < resultArr[i].seconds) {return i - 1}}// 找遍了没有找到 说明播放到最后一句了return resultArr.length - 1}// 获取到container的高度const containerHeight = container.clientHeight// 获取到第一个li的高度const liHeight = ul.children[0].clientHeight// 设置最大最小偏移 解决效果不佳const minOffset = 0const maxOffset = ul.clientHeight - containerHeight// 滚动效果function setOffset() {// 下标let index = getIndex()// 滚动到哪了 li的高度乘以下标就是对应的歌词 // 然后减去容器的一半 这时对应的li就在接近中间的位置// 我们再加上li一半的高度这时对应li就在中间let offset = liHeight * index - containerHeight / 2 + liHeight / 2// 判断// 为什么offset会小于0?// 假设现在下标为0 选取到了第0个// 那么就是 liHeight*0 - 200+liHeight/2if (offset < minOffset) {// offset赋为minOffsetoffset = minOffset}// 为什么会大于maxOffset?// 当我们歌到了最后的时候 就会造成这种情况if (offset > maxOffset) {// offset赋为maxOffsetoffset = maxOffset}// 现在可以滚动了 滚动ul// 建议大家使用transform// 好处在哪? 如果使用margin 会造成reflow重新布局 效率会出现问题// transform不在渲染主线程上执行 而是在合成线程上执行 就不会造成reflowul.style.transform = `translateY(-${offset}px)`// 设置active// 首先我们获取到activelet li = ul.querySelector(".active")// 存在就移除if (li) {li.classList.remove("active");}// 获取到下标对应的歌词li = ul.children[index];if (li) {li.classList.add("active");}}// 我们需要用到audio中的timeupdate事件audio.addEventListener("timeupdate", setOffset)
</script>
</html>