<audio id="player" controls autoplay src="music.mp3"></audio>

標簽來包含歌詞。每一行歌詞使用
1. 標簽來表示，在
2. 標簽中添加文本即可。下面是一個示例代碼：

   <ol id="lyrics">
   <li data-time="00:00:00">Verse 1</li>
   <li data-time="00:00:10">Chorus 1</li>
   <li data-time="00:00:20">Verse 2</li>
   <li data-time="00:00:30">Chorus 2</li>
   </ol>

   上面的代碼中，我們創建了一個ID為“lyrics”的有序列表，并添加了4行歌詞。每一行歌詞都具有data-time屬性，該屬性表示歌詞出現的時間。 最后，我們需要編寫JavaScript代碼來讓歌詞隨著歌曲的播放而同步。我們可以通過監聽事件，獲取音樂的當前播放時間，并根據歌詞的data-time屬性更新歌詞。下面是一個簡單的JavaScript代碼實現：

   var player = document.getElementById('player');
   var lyrics = document.getElementById('lyrics');
   var index = 0;
   player.addEventListener('timeupdate', function() {
   var currentTime = player.currentTime;
   var lyricTime = lyrics.children[index].getAttribute('data-time');
   if (currentTime >lyricTime) {
   lyrics.children[index].className = 'active';
   index++;
   }
   });

   上面的代碼中，我們首先獲取了ID為“player”和“lyrics”的元素。然后，我們添加了一個時間更新監聽器，該監聽器會在每個播放器時間更新時觸發。隨后，我們獲取了當前音樂的播放時間，并獲取下一行歌詞的時間。如果當前時間大于下一行歌詞的時間，我們就把該行歌詞的className設置為“active”，并將index加1，表示進入下一行歌詞。 綜上所述，以上是HTML5帶歌詞的音樂播放器的代碼實現方法。通過以上代碼，我們可以輕松地創建一個漂亮和功能強大的音樂播放器，在播放音樂的同時展示歌詞。