HTML5使用Audio标签实现歌词同步的效果

HTML5的Audio标签可以用于播放音频文件，并且可以结合JavaScript来实现歌词同步的效果。具体实现步骤如下：

1. 在HTML页面中添加Audio标签，设置src属性为音频文件的URL。

<audio id="audio" src="music.mp3"></audio>

2. 在HTML页面中添加一个用于显示歌词的元素，比如一个div标签。

<div id="lyrics"></div>

3. 编写JavaScript代码来解析歌词文件，并将歌词显示在页面上。假设歌词文件的格式为每行一句歌词，每句歌词的时间戳格式为[mm:ss.xx]，其中mm表示分钟，ss表示秒，xx表示毫秒。代码如下：

var lyrics = document.getElementById("lyrics");
var audio = document.getElementById("audio");

// 解析歌词文件，得到一个数组，每个元素包含歌词和时间戳
var lrc = parseLrc(lrcFile);

// 当音频播放时，更新歌词
audio.addEventListener("timeupdate", function() {
  var currentTime = audio.currentTime;
  for (var i = 0; i < lrc.length; i++) {
    if (currentTime > lrc[i].time && (!lrc[i+1] || currentTime < lrc[i+1].time)) {
      // 显示当前歌词
      lyrics.innerHTML = lrc[i].lyric;
    }
  }
});

// 解析歌词文件
function parseLrc(lrcFile) {
  var lines = lrcFile.split("\n");
  var lrc = [];
  for (var i = 0; i < lines.length; i++) {
    var match = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/.exec(lines[i]);
    if (match) {
      var time = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / 100;
      var lyric = match[4].trim();
      lrc.push({time: time, lyric: lyric});
    }
  }
  return lrc;
}

解析歌词文件的函数parseLrc返回一个包含歌词和时间戳的数组。在音频播放时，通过监听timeupdate事件，获取当前播放时间，然后遍历歌词数组，找到当前时间对应的歌词并显示在页面上。

注意：由于浏览器的安全限制，如果音频文件和歌词文件不在同一个域名下，需要设置跨域访问的响应头。