实现歌词同步js音乐播放器

<div id="lyrics-container">
  <!-- 歌词将动态插入到这里 -->
</div>
<audio id="audio-player" src="path_to_your_music_file.mp3"></audio>

// 假设我们有一个LRC格式的歌词字符串
const lrcContent = `
[00:00.00] 歌词开始
[00:05.00] 第一句歌词
[00:10.00] 第二句歌词
...
`;

// 解析LRC内容为对象数组
function parseLrc(lrc) {
  const lines = lrc.split('\n');
  const lyrics = [];
  lines.forEach(line => {
    const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
    if (match) {
      const minutes = parseInt(match[1], 10);
      const seconds = parseInt(match[2], 10);
      const milliseconds = parseInt(match[3], 10);
      const time = minutes * 60 + seconds + milliseconds / 1000;
      const text = match[4].trim();
      lyrics.push({ time, text });
    }
  });
  return lyrics;
}

const lyrics = parseLrc(lrcContent);

// 更新歌词显示
function updateLyrics(currentTime) {
  const container = document.getElementById('lyrics-container');
  container.innerHTML = ''; // 清空之前的歌词
  for (let i = 0; i < lyrics.length; i++) {
    if (currentTime >= lyrics[i].time) {
      const p = document.createElement('p');
      p.textContent = lyrics[i].text;
      container.appendChild(p);
    } else {
      break;
    }
  }
}

// 监听音频播放时间变化
const audioPlayer = document.getElementById('audio-player');
audioPlayer.addEventListener('timeupdate', () => {
  updateLyrics(audioPlayer.currentTime);
});

// 初始加载时也更新一次歌词
updateLyrics(audioPlayer.currentTime);