js实现滚动歌词

<div id="lyrics-container">
  <div id="lyrics"></div>
</div>
<audio id="audio" src="your-music-file.mp3" controls></audio>

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

#lyrics {
  position: absolute;
  width: 100%;
  text-align: center;
}

const audio = document.getElementById('audio');
const lyricsContainer = document.getElementById('lyrics-container');
const lyricsElement = document.getElementById('lyrics');

const lyricsData = [
  { time: 0, text: "Verse 1" },
  { time: 10, text: "Line 1 of Verse 1" },
  { time: 20, text: "Line 2 of Verse 1" },
  // Add more lyrics as needed
];

function updateLyrics() {
  const currentTime = audio.currentTime;
  let currentLyricIndex = 0;

  for (let i = 0; i < lyricsData.length; i++) {
    if (currentTime >= lyricsData[i].time) {
      currentLyricIndex = i;
    } else {
      break;
    }
  }

  lyricsElement.innerHTML = lyricsData[currentLyricIndex].text;
  lyricsElement.style.top = `${currentLyricIndex * 30}px`; // Adjust the height as needed
}

audio.addEventListener('timeupdate', updateLyrics);