js实现音乐播放器歌词滚动

<div id="lyrics-container">
  <div id="lyrics">
    <p data-time="0">Verse 1</p>
    <p data-time="10">Chorus</p>
    <p data-time="20">Verse 2</p>
    <p data-time="30">Bridge</p>
    <p data-time="40">Outro</p>
  </div>
</div>
<audio id="audio" src="path_to_your_music_file.mp3" controls></audio>

#lyrics-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

#lyrics p {
  margin: 0;
  padding: 10px;
  opacity: 0.7;
  transition: all 0.5s ease;
}

#lyrics p.active {
  color: #fff;
  opacity: 1;
  transform: translateY(-20px);
}

const audio = document.getElementById('audio');
const lyricsContainer = document.getElementById('lyrics');
const lyrics = lyricsContainer.getElementsByTagName('p');

function highlightLyric() {
  const currentTime = audio.currentTime;
  for (let i = 0; i < lyrics.length; i++) {
    const lyricTime = parseFloat(lyrics[i].getAttribute('data-time'));
    if (currentTime >= lyricTime && currentTime < lyricTime + 5) {
      for (let j = 0; j < lyrics.length; j++) {
        lyrics[j].classList.remove('active');
      }
      lyrics[i].classList.add('active');
      break;
    }
  }
}

audio.addEventListener('timeupdate', highlightLyric);