下面是实现“用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;
}
});
示例说明
下面分别对上述示例中的两个代码块进行说明。
- 歌词解析
首先定义了一个parseLrc
函数,用于解析lrc歌词。该函数接收一个歌词字符串作为参数,返回一个数组,数组中的每个元素包含一个时间戳和一行歌词。解析过程中使用正则表达式匹配歌词中的时间戳,并将其转化为秒数进行存储。最后返回歌词数据数组lrcList
。
接下来使用fetch
函数来加载歌词文件,并将其内容作为参数传给parseLrc
函数进行解析。解析完成后,可将解析后的歌词数据存储在变量lrcData
中,并进行后续操作。
- 歌词显示
在音频元素上绑定了一个timeupdate
事件,该事件会在音频播放器的播放进度更新时触发。在事件处理函数中,首先判断是否有歌词数据,并且当前时间是否已经超过了第一行歌词的时间戳。如果满足条件,就开始循环歌词数据,通过判断当前时间所处的位置来更新歌词区域。具体思路是将每行歌词的时间戳与当前时间进行比较,找到当前播放的歌词所在的行,并将其展示在歌词区域中,同时将当前歌词行的索引存储在currentLrcIndex
中,避免重复更新。
在切换歌曲时,需清空歌词区域,并将当前歌词行的索引恢复为初始值-1,保证后续的歌词更新能够重新从第一行开始。
以上就是通过JavaScript实现支持lrc歌词的播放器的完整攻略和示例说明。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:用javascript实现的支持lrc歌词的播放器 - Python技术站