本文最后更新于841 天前，其中的信息可能已经过时，如有错误请评论留言
先看效果，如下：
下面进行正题，着手实践
素材
事先准备好多材料有一个 mp3 的音乐文件，和一个配套的歌词字符串（放在 data.js 中，歌词太长了分出来放，如下：）
// data.js
let lrc = `[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]啊 躲不开痴恋的欣慰
[01:02.86]啊 找不到色相代替
[01:08.09]啊 参一生参不透这条难题
[01:13.15]吞风吻雨葬落日未曾彷徨
[01:15.73]欺山赶海践雪径也未绝望
[01:18.23]拈花把酒偏折煞世人情狂
[01:20.90]凭这两眼与百臂或千手不能防
[01:23.76]天阔阔雪漫漫共谁同航
[01:26.09]这沙滚滚水皱皱笑着浪荡
[01:28.68]贪欢一刻偏教那女儿情长埋葬
[01:32.38]
[01:34.09]吞风吻雨葬落日未曾彷徨
[01:36.50]欺山赶海践雪径也未绝望
[01:39.07]拈花把酒偏折煞世人情狂
[01:41.69]凭这两眼与百臂或千手不能防
[01:44.68]天阔阔雪漫漫共谁同航
[01:46.93]这沙滚滚水皱皱笑着浪荡
[01:49.54]贪欢一刻偏教那女儿情长埋葬
[01:53.41]
[02:15.45]笑你我枉花光心计
[02:18.53]爱竞逐镜花那美丽
[02:21.14]怕幸运会转眼远逝
[02:23.76]为贪嗔喜恶怒着迷
[02:26.43]责你我太贪功恋势
[02:28.98]怪大地众生太美丽
[02:31.60]悔旧日太执信约誓
[02:34.26]为悲欢哀怨妒着迷
[02:36.90]啊 舍不得璀灿俗世
[02:42.04]啊 躲不开痴恋的欣慰
[02:47.34]啊 找不到色相代替
[02:52.52]啊 参一生参不透这条难题
[02:57.47]吞风吻雨葬落日未曾彷徨
[03:00.05]欺山赶海践雪径也未绝望
[03:02.64]拈花把酒偏折煞世人情狂
[03:05.27]凭这两眼与百臂或千手不能防
[03:08.22]天阔阔雪漫漫共谁同航
[03:10.49]这沙滚滚水皱皱笑着浪荡
[03:13.06]贪欢一刻偏教那女儿情长埋葬
[03:18.45]吞风吻雨葬落日未曾彷徨
[03:20.90]欺山赶海践雪径也未绝望
[03:23.54]拈花把酒偏折煞世人情狂
[03:26.21]凭这两眼与百臂或千手不能防
[03:29.07]天阔阔雪漫漫共谁同航
[03:31.32]这沙滚滚水皱皱笑着浪荡
[03:33.92]贪欢一刻偏教那女儿情长埋葬
[03:39.32]吞风吻雨葬落日未曾彷徨
[03:41.84]欺山赶海践雪径也未绝望
[03:44.38]拈花把酒偏折煞世人情狂
[03:47.04]凭这两眼与百臂或千手不能防
[03:49.99]天阔阔雪漫漫共谁同航
[03:52.20]这沙滚滚水皱皱笑着浪荡
[03:54.89]贪欢一刻偏教那女儿情长埋葬
[04:00.28]吞风吻雨葬落日未曾彷徨
[04:02.68]欺山赶海践雪径也未绝望
[04:05.25]拈花把酒偏折煞世人情狂
[04:07.90]凭这两眼与百臂或千手不能防
[04:10.85]天阔阔雪漫漫共谁同航
[04:13.08]这沙滚滚水皱皱笑着浪荡
[04:15.75]贪欢一刻偏教那女儿情长埋葬
[04:19.48]`;界面（HTML）
简单写一下就好，播放器放上面，歌词放下面更简单，后面写CSS也更简单
这里我用 link 设置了一个网易云的网站图标，不写也可以
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>歌词滚动</title>
<link rel="shortcut icon" href="https://s1.music.126.net/style/favicon.ico?v20180823" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<ul class="lrc-list"></ul>
</div>
<audio controls src="./assets/music.mp3"></audio>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>
</body>
</html>样式（CSS）
也是一些基本的简单样式，不理解可以一边写一边看效果，不知道的就先不写，等项目全部写完再回头来写
// index.css
* {
margin: 0;
padding: 0;
}
body {
background: #000;
color: #666;
text-align: center;
}
audio {
width: 500px;
margin: 35px 0;
}
.container {
margin-top: 40px;
height: 500px;
overflow: hidden;
}
.container ul {
list-style: none;
transition: 0.6s;
}
.container li {
font-size: 17px;
height: 30px;
line-height: 30px;
transition: 0.3s;
}
.container li.active {
color: #fff;
transform: scale(1.3);
}效果实现（JS）
具体说明都写在代码注释里了，这里直接上代码
// index.js
/**
* 解析歌词字符串
* 得到一个歌词对象数组
* @returns [{
* time: 开始时间
words: 歌词内容
* },]
*/
function parseLrc() {
let lines = lrc.split('\n')
let result = []
lines.map(line => {
let [timeStr, content] = line.split(']')
timeStr = timeStr.substring(1)
let obj = {
time: parseTime(timeStr),
words: content
}
result.push(obj)
})
return result
}
/**
* 将时间字符串转换为数字（秒）
* @param {string} timeStr 时间字符串
* @returns {number} 时间秒数
*/
function parseTime(timeStr) {
let [min, sec] = timeStr.split(':')
return +min * 60 + +sec // 比后面这个传统写法高级点 parseInt(min) * 60 + parseInt(sec)
}
let lrcData = parseLrc()
// 获取需要的 dom
let doms = {
audio: document.querySelector('audio'),
container: document.querySelector('.container'),
ul: document.querySelector('.container ul'),
}
/**
* 计算出，在当前播放器播放到第几秒的情况下
* lrcData数组中，应该高亮显示的歌词下标
* 如果没有任何一句歌词需要显示，则得到-1
* @returns {number} 当前播放时间对应的歌词索引
*/
function findIndex() {
let curTime = doms.audio.currentTime
for (let i = 0; i < lrcData.length; i++) {
if (curTime < lrcData[i].time) {
return i - 1
}
}
// 找遍了都没找到（说明播放到最后一句）返回最后一句的索引
return lrcData.length - 1
}
/* 界面 */
/**
* 创建歌词元素 li
*/
function createLrcElements() {
// 创建文档片段
let frag = document.createDocumentFragment()
lrcData.map(item => {
let li = document.createElement('li')
li.textContent = item.words
frag.appendChild(li)
})
doms.ul.appendChild(frag)
}
createLrcElements()
// 容器高度
let containerHeight = doms.container.clientHeight
// 歌词元素高度
let liHeight = doms.ul.children[0].clientHeight
// 最大偏移量 = ul 高度 - 容器高度
let maxOffset = doms.ul.clientHeight - containerHeight
/**
* 设置 ul 元素的偏移量
*/
function setOffset() {
let index = findIndex()
// 偏移量 = 歌词元素高度 * 索引第几个 + 歌词元素高度的一半 - 容器高度的一半
let offset = liHeight * index + liHeight / 2 - containerHeight / 2
if(offset < 0) offset = 0
if(offset > maxOffset) offset = maxOffset
doms.ul.style.transform = `translateY(-${offset}px)`
// 去掉之前的 li 的 active 样式
let li = document.querySelector('.active')
li?.classList.remove('active')
// 设置当前的 li 的 active 样式
li = doms.ul.children[index]
li?.classList.add('active')
}
// 播放时间改变调用 setOffset 重新设置偏移量
doms.audio?.addEventListener('timeupdate', setOffset)PS:这里其实有个小疑问
if(offset < 0) offset = 0
if(offset > maxOffset) offset = maxOffset为什么不可以写成
(offset < 0) && (offset = 0)
(offset > maxOffset) && (offset = maxOffset)有知道原因的欢迎留言给我
这样，音乐软件中歌词滚动效果就实现了，看完了文章，也赶快去动手实践一下吧！
