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 函数实现歌词的滚动和高亮显示。最后，添加了一个滚动事件监听器，以便用户通过滚动调整歌词显示位置。

注意：

文章说明：该功能是根据“渡一前端”视频敲出来的，并不属于原创，但是转载或是翻译的连接我找不到了，所以使用的原创标签，特此说明一下。