html 播放音乐自动显示歌词

要在 HTML 中播放音乐并自动显示歌词，您需要使用 JavaScript 来实现。以下是一个基本的实现示例：

首先，您需要为歌曲和歌词准备好相应的 HTML 和 CSS 标记。例如：

<div id="music-player">
  <audio id="audio" src="music.mp3"></audio>
  <div id="lyrics"></div>
</div>

#lyrics {
  height: 300px;
  overflow: auto;
  font-size: 18px;
  line-height: 1.5;
}

然后，在 JavaScript 中，您需要使用 XMLHttpRequest 对象获取歌词文件，并将其解析为可供显示的格式。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'lyrics.txt', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var lyrics = xhr.responseText.split('\n');
    var html = '';
    for (var i = 0; i < lyrics.length; i++) {
      html += '<p>' + lyrics[i] + '</p>';
    }
    document.getElementById('lyrics').innerHTML = html;
  }
};
xhr.send();

接下来，您需要在音乐播放器中添加一个 `timeupdate` 事件监听器，以便在歌曲播放时更新歌词的显示。例如：

var audio = document.getElementById('audio');
audio.addEventListener('timeupdate', function() {
  var lyrics = document.getElementById('lyrics').getElementsByTagName('p');
  for (var i = 0; i < lyrics.length; i++) {
    var start = lyrics[i].getAttribute('data-start');
    var end = lyrics[i].getAttribute('data-end');
    if (audio.currentTime >= start && audio.currentTime < end) {
      lyrics[i].className = 'active';
      document.getElementById('lyrics').scrollTop = lyrics[i].offsetTop - 150;
    } else {
      lyrics[i].className = '';
    }
  }
});

在这个事件监听器中，您需要遍历所有歌词元素，并根据当前播放时间决定哪些歌词应该被突出显示。您可以使用 `data-start` 和 `data-end` 属性来指定每个歌词的开始和结束时间。

最后，您需要使用 CSS 样式来突出显示当前的歌词。例如：

#lyrics p.active {
  color: red;
  font-weight: bold;
}

通过以上步骤，您就可以在 HTML 中播放音乐并自动显示歌词了。请注意，这只是一个基本实现示例，您可能需要根据自己的需求进行修改和优化。