html5如何實(shí)現(xiàn)歌詞滾動(dòng)效果

2、準(zhǔn)備歌詞數(shù)據(jù)

將歌詞按照行分割成一個(gè)數(shù)組，并為每一行歌詞添加一個(gè)時(shí)間戳，用于控制滾動(dòng)的時(shí)間。

var lyrics = [
  {time: "00:00", text: "第一行歌詞"},
  {time: "00:10", text: "第二行歌詞"},
  // ...
];

3、處理音頻文件

確保你有一個(gè)音頻文件，并將其嵌入到HTML中，可以使用標(biāo)簽來嵌入音頻文件。

4、監(jiān)聽音頻播放事件

使用JavaScript監(jiān)聽音頻的播放事件，并在每個(gè)時(shí)間戳到達(dá)時(shí)更新歌詞的顯示。

var audio = document.getElementById("audio");
var lyricsDiv = document.getElementById("lyrics");
audio.addEventListener("timeupdate", function() {
  var currentTime = formatTime(audio.currentTime);
  var currentLine = lyrics.find(function(line) {
    return line.time === currentTime;
  });
  
  if (currentLine) {
    lyricsDiv.textContent = currentLine.text;
  }
});
function formatTime(seconds) {
  var minutes = Math.floor(seconds / 60);
  var seconds = Math.floor(seconds % 60);
  return minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
}

5、樣式歌詞顯示

根據(jù)需要，你可以使用CSS為歌詞

#lyrics {
  font-size: 24px;
  color: white;
  background-color: black;
  padding: 10px;
}