用javascript实现的支持lrc歌词的播放器

下面是实现“用javascript实现的支持lrc歌词的播放器”的完整攻略和示例说明。

下面是实现“用javascript实现的支持lrc歌词的播放器”的完整攻略和示例说明。

1. 资源准备

首先需要准备好播放器所需的资源，包括音频文件和lrc歌词文件。这里以一首名为《夜空中最亮的星》的音乐和其对应的歌词文件为例。将音频文件和歌词文件放到项目的目录下，命名为“audio.mp3”和“audio.lrc”，并将代码中对应的路径修改为相对路径。

2. HTML结构

开始构建HTML结构，其中包括一个音频播放器和一个歌词显示区域。建议可以使用<audio>标签来创建一个控制音频播放的元素，同时在歌词显示区域使用<pre>标签来显示歌词。示例代码如下：

<audio controls src="audio.mp3"></audio>
<pre id="lrc"></pre>

3. 解析lrc歌词

接下来需要解析歌词文件，将其转化为可以JS操作的数据，可采用正则表达式进行匹配。将解析后的数据存储在一个数组中，每个元素包含歌词和对应的时间戳。变量名可以为lrcData。示例代码如下：

function parseLrc(lrcContent) {
  // 解析歌词
  var lrcList = [];
  var lines = lrcContent.split("\n");
  var timeReg = /\[(\d{2}):(\d{2})\.(\d{2})\]/;
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i].trim();
    if (line) {
      var matched = timeReg.exec(line);
      if (matched) {
        var timestamp = parseInt(matched[1]) * 60 + parseInt(matched[2]) + parseInt(matched[3]) / 1000;
        var lrc = line.replace(timeReg, "").trim();
        lrcList.push({
          timestamp: timestamp,
          lrc: lrc
        });
      }
    }
  }
  return lrcList;
}

// 加载歌词文件，解析歌词数据
fetch('audio.lrc')
  .then(function(response) {
    return response.text();
  })
  .then(function(lrcContent) {
    var lrcData = parseLrc(lrcContent);
    // console.log(lrcData);
  });

4. 显示歌词

在播放器上绑定一个时间更新事件，用以判断当前播放时间所处的歌词，并在歌词显示区域展示该行歌词。需要注意的是，在切换歌曲时需要将之前的事件解绑，同时需要清空歌词显示区域。示例代码如下：

var audio = document.querySelector("audio"); // 音频元素
var lrcBox = document.getElementById("lrc"); // 歌词显示区域

var currentLrcIndex = -1; // 当前歌词行

audio.addEventListener("timeupdate", function() {
  if (lrcData && lrcData.length > 0) {
    var currentTime = this.currentTime; // 当前时间点
    if (currentTime >= lrcData[0].timestamp) {
      if (currentLrcIndex === -1) {
        currentLrcIndex = 0;
      }
      for (var i = currentLrcIndex; i < lrcData.length - 1; i++) {
        if (currentTime >= lrcData[i].timestamp && currentTime < lrcData[i + 1].timestamp) {
          // 更新歌词
          if (currentLrcIndex !== i) {
            lrcBox.innerHTML = lrcData[i].lrc;
            currentLrcIndex = i;
          }
        }
      }
    }
  }
});

// 切换歌曲时清空歌词区域
audio.addEventListener("play", function() {
  if (lrcData && lrcData.length > 0) {
    lrcBox.innerHTML = "";
    currentLrcIndex = -1;
  }
});

示例说明

下面分别对上述示例中的两个代码块进行说明。

1. 歌词解析

首先定义了一个parseLrc函数，用于解析lrc歌词。该函数接收一个歌词字符串作为参数，返回一个数组，数组中的每个元素包含一个时间戳和一行歌词。解析过程中使用正则表达式匹配歌词中的时间戳，并将其转化为秒数进行存储。最后返回歌词数据数组lrcList。

接下来使用fetch函数来加载歌词文件，并将其内容作为参数传给parseLrc函数进行解析。解析完成后，可将解析后的歌词数据存储在变量lrcData中，并进行后续操作。

1. 歌词显示

在音频元素上绑定了一个timeupdate事件，该事件会在音频播放器的播放进度更新时触发。在事件处理函数中，首先判断是否有歌词数据，并且当前时间是否已经超过了第一行歌词的时间戳。如果满足条件，就开始循环歌词数据，通过判断当前时间所处的位置来更新歌词区域。具体思路是将每行歌词的时间戳与当前时间进行比较，找到当前播放的歌词所在的行，并将其展示在歌词区域中，同时将当前歌词行的索引存储在currentLrcIndex中，避免重复更新。

在切换歌曲时，需清空歌词区域，并将当前歌词行的索引恢复为初始值-1，保证后续的歌词更新能够重新从第一行开始。

以上就是通过JavaScript实现支持lrc歌词的播放器的完整攻略和示例说明。