HTML+JS+CSS歌词滚动效果

代码下载：【免费】HTML+JS+CSS歌词滚动效果资源-CSDN文库

一些代码说明：

初始化歌词数据和时间字符串转换为秒数：

// 初始化歌词数据
const initWords = () => {let lines = lrc.split('\n');let res = [];lines.forEach(item => {let parts = item.split(']');let timeStr = parts[0].substring(1);let obj = {time: parseTime(timeStr), // 调用 parseTime 函数将时间字符串转换为秒数words: parts[1]};res.push(obj);});return res;
};// 时间字符串转换为秒数
const parseTime = (timeStr) => {let parts = timeStr.split(':');let time = +parts[0] * 60 + +parts[1];return time;
};let lrcData = initWords(); // 调用初始化歌词数据函数

获取当前显示歌词下标：

// 得到当前显示歌词下标
const 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;
};

歌词元素显示：

// 歌词元素显示
const creatLrcElements = () => {let frag = document.createDocumentFragment(); // 创建文档片段for (let i = 0; i < lrcData.length; i++) {let li = document.createElement('li');li.textContent = lrcData[i].words;frag.appendChild(li);}doms.ul.appendChild(frag); // 将文档片段添加到 ul 元素中
};
creatLrcElements();

设置偏移和滚动事件监听器：

// 设置偏移
const setOffset = () => {let index = findIndex();let offset = liHeight * index + liHeight / 2 - containerHeight / 2;if (offset < 0) {offset = 0;} else if (offset > maxHeight) {offset = maxHeight;}doms.ul.style.transform = `translateY(-${offset}px)`;let li = doms.ul.querySelector('.active');if (li) {li.classList.remove('active');}li = doms.ul.children[index];if (li) {li.classList.add('active');}
};doms.audio.addEventListener('timeupdate', setOffset); // 监听音频播放时间更新事件// 添加滚动事件监听器
doms.container.addEventListener('wheel', function(event) {var deltaY = event.deltaY; // 获取滚动的垂直方向位移doms.container.scrollTop += deltaY; // 根据滚动位移调整列表的滚动位置event.preventDefault(); // 阻止页面滚动
});

这些代码主要实现了歌词的初始化、显示和随音频播放的同步滚动。其中，initWords 函数用于将歌词字符串解析成数据数组，parseTime 函数用于将时间字符串转换为秒数。通过 setOffset 函数实现歌词的滚动和高亮显示。最后，添加了一个滚动事件监听器，以便用户通过滚动调整歌词显示位置。