正文

如何轻松在HTML页面中嵌入并同步歌词：LRC文件使用全攻略

/0 浏览量
0709

在HTML页面中嵌入并同步歌词，尤其是使用LRC（Lyric/Real-time Lyrics）格式，可以让用户在欣赏音乐的同时，跟随歌词进行观看。LRC文件是一种文本文件，包含了与音频文件同步的歌词文本。以下是一份详细的攻略，帮助你轻松实现这一功能。

LRC文件基础

什么是LRC文件？

LRC文件是一种简单的文本文件，通常以.lrc为扩展名。它包含了时间戳和对应的歌词文本，格式如下：

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

每个时间戳都对应着音频文件中特定的时刻，而歌词文本则会在相应的时间显示。

创建LRC文件

你可以使用文本编辑器（如Notepad++、Sublime Text等）来创建LRC文件。确保时间戳的格式正确，并且每行歌词都紧跟一个时间戳。

HTML页面中嵌入LRC歌词

步骤一：准备音频和LRC文件

首先，你需要准备一个音频文件（如MP3）和一个对应的LRC文件。

步骤二：HTML结构

在HTML页面中，你可以使用<audio>标签来嵌入音频文件，并使用<div>或<pre>标签来显示歌词。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>同步歌词示例</title>
</head>
<body>
    <audio controls>
        <source src="your-audio-file.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
    <pre id="lyrics"></pre>

    <script>
        // JavaScript代码将在这里
    </script>
</body>
</html>

步骤三：JavaScript同步歌词

使用JavaScript来读取LRC文件，并根据音频播放时间同步显示歌词。

document.addEventListener('DOMContentLoaded', function() {
    var audio = document.querySelector('audio');
    var lyricsElement = document.getElementById('lyrics');
    var lyrics = [];

    // 读取LRC文件
    fetch('your-lrc-file.lrc')
        .then(response => response.text())
        .then(data => {
            lyrics = data.split('\n');
            lyrics.forEach(line => {
                if (line.trim() !== '') {
                    var timeMatch = line.match(/\[(\d{2}:\d{2}:\d{2}\.\d{3})\]/);
                    if (timeMatch) {
                        var time = timeMatch[1];
                        lyricsElement.innerHTML += `<span data-time="${time}">${line.replace(/\[.*?\]/g, '')}</span><br>`;
                    }
                }
            });
        });

    // 同步歌词
    audio.addEventListener('timeupdate', function() {
        var currentTime = this.currentTime;
        var currentLyric = lyrics.find(line => {
            var timeMatch = line.match(/\[(\d{2}:\d{2}:\d{2}\.\d{3})\]/);
            return timeMatch && timeMatch[1] <= currentTime;
        });

        if (currentLyric) {
            var timeMatch = currentLyric.match(/\[(\d{2}:\d{2}:\d{2}\.\d{3})\]/);
            var time = timeMatch[1];
            var allSpans = lyricsElement.querySelectorAll('span');
            allSpans.forEach(span => {
                span.style.color = 'black';
            });
            lyricsElement.querySelector(`span[data-time="${time}"]`).style.color = 'red';
        }
    });
});

步骤四：样式调整

你可以通过CSS来调整歌词的显示样式，使其更加美观。

#lyrics {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
}

通过以上步骤，你就可以在HTML页面中嵌入并同步LRC歌词了。记得替换your-audio-file.mp3和your-lrc-file.lrc为你的音频和LRC文件的实际路径。

-- 展开阅读全文 --