正文

HTML轻松实现歌词同步显示：教你调用LRC文件技巧

/0 浏览量
0709

在观看音乐视频或使用音乐播放器时，歌词同步显示是一个非常有用的功能。HTML5 提供了实现这一功能的方法，而 LRC 文件则是存储歌词的常用格式。本文将详细介绍如何使用 HTML 和 JavaScript 调用 LRC 文件，实现歌词的同步显示。

LRC 文件简介

LRC（Lyric File）是一种用于存储歌词的文本文件格式。它通常包含时间戳和对应的歌词文本。例如：

[00:00.000]这是第一句歌词
[00:03.000]这是第二句歌词
[00:06.000]这是第三句歌词

每个 [ 和 ] 之间的内容表示一个时间戳，格式为 [MM:SS.ms]，其中 MM 是分钟数，SS 是秒数，ms 是毫秒数。时间戳后面的内容则是对应的歌词。

使用 HTML 和 JavaScript 调用 LRC 文件

要实现歌词的同步显示，我们可以使用以下步骤：

  1. 创建 HTML 结构

首先，我们需要创建一个 HTML 文件，并在其中添加一个用于显示歌词的元素。这里我们使用一个 <div> 元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>歌词同步显示</title>
</head>
<body>
    <div id="lyric"></div>
    <script src="lyric.js"></script>
</body>
</html>
  1. 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来解析 LRC 文件并同步显示歌词。这里我们使用一个名为 lyric.js 的 JavaScript 文件：

// lyric.js
function loadLyric(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var lyric = xhr.responseText;
            var lines = lyric.split('\n');
            var lyricContainer = document.getElementById('lyric');
            lyricContainer.innerHTML = '';
            lines.forEach(function(line) {
                var time = line.match(/\[(\d{2}:\d{2}.\d{3})\]/);
                if (time) {
                    var text = line.replace(/\[.*?\]/, '');
                    var p = document.createElement('p');
                    p.innerText = text;
                    p.style.display = 'none';
                    lyricContainer.appendChild(p);
                }
            });
            var audio = document.createElement('audio');
            audio.src = 'your-audio-file.mp3';
            audio.oncanplaythrough = function() {
                var timer = setInterval(function() {
                    var currentTime = audio.currentTime;
                    var timeStr = currentTime.toFixed(3);
                    var timeObj = {
                        min: parseInt(timeStr.split(':')[0]),
                        sec: parseInt(timeStr.split(':')[1]),
                        ms: parseInt(timeStr.split('.')[1])
                    };
                    var targetTime = timeObj.min * 60 * 1000 + timeObj.sec * 1000 + timeObj.ms;
                    var p = lyricContainer.querySelectorAll('p');
                    p.forEach(function(item) {
                        var lineTime = item.getAttribute('data-time');
                        if (lineTime && lineTime <= targetTime) {
                            item.style.display = 'block';
                            item.style.transition = 'opacity 0.5s';
                            item.style.opacity = 1;
                        } else {
                            item.style.display = 'none';
                        }
                    });
                }, 100);
            };
            document.body.appendChild(audio);
        }
    };
    xhr.send();
}

// 调用函数加载 LRC 文件
loadLyric('your-lyric-file.lrc');

在上面的代码中，我们首先定义了一个 loadLyric 函数，它接受一个 LRC 文件的 URL 作为参数。然后，我们使用 XMLHttpRequest 对象发送一个 GET 请求来获取 LRC 文件的内容。当请求成功完成后，我们解析 LRC 文件的内容，并创建一个 <div> 元素来存储歌词。

对于每个歌词行，我们使用正则表达式匹配时间戳，并将其存储在 data-time 属性中。然后，我们创建一个 <p> 元素来显示歌词文本，并将其添加到 <div> 元素中。

最后，我们创建一个 <audio> 元素来播放音乐，并监听 oncanplaythrough 事件。当音乐可以播放时，我们使用一个定时器来同步显示歌词。

  1. 测试效果

将以上代码保存为 lyric.html 和 lyric.js 文件，并在浏览器中打开 lyric.html 文件。你应该能够看到歌词与音乐同步显示的效果。

总结

通过使用 HTML 和 JavaScript，我们可以轻松实现歌词的同步显示。LRC 文件格式简单易用，而 HTML5 提供了丰富的 API 来处理音频和视频。希望本文能帮助你更好地了解如何使用 LRC 文件和 HTML5 实现歌词同步显示。

-- 展开阅读全文 --