用js怎么实现歌词同步

用JavaScript实现歌词同步

实现歌词同步的核心要点包括：时间戳的解析与匹配、歌词内容的显示与滚动、用户体验的优化。其中，时间戳的解析与匹配是实现歌词同步的关键。通过解析歌词文件中的时间戳，将其与当前播放时间进行比对，可以精确控制歌词的显示时机。

一、解析歌词文件

歌词文件通常以LRC格式存储，它包含了时间戳与对应的歌词文本。首先，我们需要解析LRC文件，提取时间戳和歌词内容。

1、LRC文件的结构

LRC文件的格式通常如下：

[00:12.00]Line 1 lyrics
[00:17.20]Line 2 lyrics

每一行都包含一个时间戳和对应的歌词文本。

2、解析LRC文件的代码实现

使用JavaScript读取并解析LRC文件，提取时间戳和歌词内容：

function parseLRC(lrc) {
    const lines = lrc.split('n');
    const result = [];
    const timePattern = /[(d{2}):(d{2}.d{2})]/;
    for (let line of lines) {
        const match = timePattern.exec(line);
        if (match) {
            const minutes = parseInt(match[1], 10);
            const seconds = parseFloat(match[2]);
            const time = minutes * 60 + seconds;
            const text = line.replace(timePattern, '').trim();
            result.push({ time, text });
        }
    }
    return result;
}

二、实现歌词同步

解析完歌词文件后，需要将其与音频的播放时间同步显示。

1、获取音频播放时间

使用HTMLAudioElement来播放音频，并获取当前播放时间：

const audio = new Audio('path/to/your/audio/file.mp3');
audio.addEventListener('timeupdate', () => {
    const currentTime = audio.currentTime;
    updateLyrics(currentTime);
});

2、更新歌词显示

编写updateLyrics函数，根据当前播放时间更新歌词显示：

let currentLyricIndex = 0;
function updateLyrics(currentTime) {
    while (currentLyricIndex < lyrics.length - 1 && currentTime >= lyrics[currentLyricIndex + 1].time) {
        currentLyricIndex++;
    }
    if (lyrics[currentLyricIndex]) {
        displayLyrics(lyrics[currentLyricIndex].text);
    }
}
function displayLyrics(text) {
    const lyricsContainer = document.getElementById('lyricsContainer');
    lyricsContainer.innerHTML = text;
}

三、优化用户体验

为了提升用户体验，可以添加一些额外的功能，比如歌词滚动、当前歌词高亮显示等。

1、歌词滚动

当当前歌词的索引发生变化时，让歌词列表滚动到相应的位置：

function displayLyrics(text) {
    const lyricsContainer = document.getElementById('lyricsContainer');
    lyricsContainer.innerHTML = text;
    const activeLine = document.querySelector('.active');
    if (activeLine) {
        activeLine.classList.remove('active');
    }
    const lines = lyricsContainer.querySelectorAll('li');
    lines[currentLyricIndex].classList.add('active');
    lyricsContainer.scrollTop = lines[currentLyricIndex].offsetTop - lyricsContainer.offsetTop;
}

2、高亮显示当前歌词

为当前歌词添加一个高亮的CSS类：

.active {
    color: #ff0000;
    font-weight: bold;
}

3、完整的HTML和CSS示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lyrics Sync</title>
    <style>
        #lyricsContainer {
            height: 300px;
            overflow-y: scroll;
            list-style-type: none;
            padding: 0;
        }
        .active {
            color: #ff0000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <audio id="audio" src="path/to/your/audio/file.mp3"></audio>
    <button onclick="playAudio()">Play</button>
    <ul id="lyricsContainer"></ul>
    <script>
        const lyrics = parseLRC(`[00:12.00]Line 1 lyricsn[00:17.20]Line 2 lyrics`);
        const audio = document.getElementById('audio');
        let currentLyricIndex = 0;
        function playAudio() {
            audio.play();
        }
        audio.addEventListener('timeupdate', () => {
            const currentTime = audio.currentTime;
            updateLyrics(currentTime);
        });
        function updateLyrics(currentTime) {
            while (currentLyricIndex < lyrics.length - 1 && currentTime >= lyrics[currentLyricIndex + 1].time) {
                currentLyricIndex++;
            }
            if (lyrics[currentLyricIndex]) {
                displayLyrics(lyrics[currentLyricIndex].text);
            }
        }
        function displayLyrics(text) {
            const lyricsContainer = document.getElementById('lyricsContainer');
            lyricsContainer.innerHTML = text;
            const activeLine = document.querySelector('.active');
            if (activeLine) {
                activeLine.classList.remove('active');
            }
            const lines = lyricsContainer.querySelectorAll('li');
            lines[currentLyricIndex].classList.add('active');
            lyricsContainer.scrollTop = lines[currentLyricIndex].offsetTop - lyricsContainer.offsetTop;
        }
        function parseLRC(lrc) {
            const lines = lrc.split('n');
            const result = [];
            const timePattern = /[(d{2}):(d{2}.d{2})]/;
            for (let line of lines) {
                const match = timePattern.exec(line);
                if (match) {
                    const minutes = parseInt(match[1], 10);
                    const seconds = parseFloat(match[2]);
                    const time = minutes * 60 + seconds;
                    const text = line.replace(timePattern, '').trim();
                    result.push({ time, text });
                }
            }
            return result;
        }
    </script>
</body>
</html>

四、进一步优化

在实际项目中，可能需要处理更多复杂的情况，例如歌词文件的加载、歌词的精确匹配、歌词的多行显示等。

1、异步加载歌词文件

为了提高用户体验，可以使用fetch来异步加载歌词文件：

fetch('path/to/your/lyrics/file.lrc')
    .then(response => response.text())
    .then(data => {
        lyrics = parseLRC(data);
    });

2、处理多行歌词

如果歌词文件中包含多行歌词，可以在解析时将其拆分并存储：

function parseLRC(lrc) {
    const lines = lrc.split('n');
    const result = [];
    const timePattern = /[(d{2}):(d{2}.d{2})]/;
    for (let line of lines) {
        const match = timePattern.exec(line);
        if (match) {
            const minutes = parseInt(match[1], 10);
            const seconds = parseFloat(match[2]);
            const time = minutes * 60 + seconds;
            const text = line.replace(timePattern, '').trim();
            result.push({ time, text });
        }
    }
    return result;
}

3、精确匹配歌词时间

为了更精确地匹配歌词时间，可以使用二分查找算法来找到当前播放时间对应的歌词：

function findCurrentLyricIndex(currentTime) {
    let low = 0;
    let high = lyrics.length - 1;
    while (low <= high) {
        const mid = Math.floor((low + high) / 2);
        if (lyrics[mid].time < currentTime) {
            low = mid + 1;
        } else if (lyrics[mid].time > currentTime) {
            high = mid - 1;
        } else {
            return mid;
        }
    }
    return high;
}
audio.addEventListener('timeupdate', () => {
    const currentTime = audio.currentTime;
    currentLyricIndex = findCurrentLyricIndex(currentTime);
    updateLyrics(currentTime);
});

通过上述步骤，使用JavaScript实现歌词同步可以变得更加简便和高效。在实际应用中，可以根据需求进一步优化和扩展。为了更好地管理项目，推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile 进行项目协作和管理，从而提升开发效率和团队协作能力。