js如何实现歌词

实现歌词功能的步骤

解析歌词文件 通常歌词文件为LRC格式，包含时间戳和歌词文本。需要将文件内容解析为结构化数据，例如数组对象，每个对象包含时间（毫秒）和歌词文本。

function parseLRC(lrcText) {
  const lines = lrcText.split('\n');
  return lines.map(line => {
    const match = line.match(/^\[(\d{2}):(\d{2})\.(\d{2})\](.*)/);
    if (!match) return null;
    const [_, min, sec, centisec, text] = match;
    const time = (+min * 60 + +sec) * 1000 + +centisec * 10;
    return { time, text: text.trim() };
  }).filter(Boolean);
}

同步歌词与音频 使用音频播放器的timeupdate事件监听当前播放时间，与解析后的歌词数据比较，找到当前应显示的歌词行。

function syncLyrics(audioElement, lyricsData) {
  audioElement.addEventListener('timeupdate', () => {
    const currentTime = audioElement.currentTime * 1000;
    const currentLine = lyricsData.reduce((last, line) => {
      return line.time <= currentTime ? line : last;
    }, null);
    if (currentLine) updateDisplay(currentLine.text);
  });
}

高亮当前歌词 通过CSS实现当前播放歌词的高亮效果，同时可以添加滚动功能使当前歌词始终保持在可视区域。

function updateDisplay(text) {
  const lyricElement = document.getElementById('lyrics');
  lyricElement.textContent = text;
  lyricElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

优化性能 对于长音频文件，可以使用二分查找替代reduce方法快速定位当前歌词行，减少计算量。

function findCurrentLine(time, lyrics) {
  let left = 0, right = lyrics.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (lyrics[mid].time <= time) left = mid + 1;
    else right = mid - 1;
  }
  return lyrics[right];
}

添加动画效果 通过CSS transition或animation为歌词切换添加淡入淡出效果，提升用户体验。

#lyrics {
  transition: opacity 0.3s ease;
}
.highlight {
  color: #ff0000;
  font-size: 1.2em;
}