js怎么制作歌词同步

一、JS制作歌词同步的核心步骤

解析歌词文件、计算时间戳、更新UI。解析歌词文件是制作歌词同步的第一步，通常歌词文件会使用LRC格式。LRC格式是一种文本格式，包含了时间戳和歌词文本。在解析完歌词文件后，需要计算每行歌词的时间戳，并将这些时间戳与音频播放时间进行比较，实时更新UI。

详细描述：解析歌词文件是整个过程中的关键步骤之一。LRC格式的歌词文件通常包含时间戳和歌词文本的组合。例如，“[00:01.00]歌词一行”。在解析这个文件时，我们需要将时间戳提取出来，并将其转换为毫秒数，然后将每行歌词和其对应的时间戳存储在一个数组中。这样，在音频播放过程中，我们可以通过比较当前播放时间和时间戳数组中的值，来决定何时更新UI显示相应的歌词。

二、解析歌词文件

解析LRC格式的歌词文件是实现歌词同步的基础步骤。LRC文件通常包含多行文本，每行文本包含一个时间戳和对应的歌词。解析这些时间戳并将其转换为毫秒数是关键。

1、读取并处理歌词文件

首先，我们需要通过JavaScript读取歌词文件的内容。可以使用AJAX或Fetch API来获取歌词文件内容。假设我们已经成功获取了歌词文件内容，我们需要将其拆分成多行并逐行处理。

function parseLyrics(lyrics) {
    const lines = lyrics.split('n');
    const result = [];
    const timeReg = /[(d{2}):(d{2}).(d{2})]/;
    lines.forEach(line => {
        const match = line.match(timeReg);
        if (match) {
            const minutes = parseInt(match[1], 10);
            const seconds = parseInt(match[2], 10);
            const milliseconds = parseInt(match[3], 10);
            const time = minutes * 60 * 1000 + seconds * 1000 + milliseconds * 10;
            const text = line.replace(timeReg, '').trim();
            result.push({ time, text });
        }
    });
    return result;
}

在这个函数中，我们首先将歌词文件内容按行拆分，然后使用正则表达式匹配每行中的时间戳，将其转换为毫秒数并存储在一个数组中。

2、处理多行歌词

有时候，一行歌词可能包含多个时间戳，这种情况下，我们需要将每个时间戳和对应的歌词文本分开存储。

function parseLyrics(lyrics) {
    const lines = lyrics.split('n');
    const result = [];
    const timeReg = /[(d{2}):(d{2}).(d{2})]/g;
    lines.forEach(line => {
        let match;
        while ((match = timeReg.exec(line)) !== null) {
            const minutes = parseInt(match[1], 10);
            const seconds = parseInt(match[2], 10);
            const milliseconds = parseInt(match[3], 10);
            const time = minutes * 60 * 1000 + seconds * 1000 + milliseconds * 10;
            const text = line.replace(timeReg, '').trim();
            result.push({ time, text });
        }
    });
    return result;
}

这个改进后的函数使用了全局匹配的正则表达式，以确保每行中的所有时间戳都能被正确解析并存储。

三、计算时间戳

将时间戳转换为毫秒数后，我们需要计算每行歌词的时间戳，并将这些时间戳与音频播放时间进行比较，以实现歌词同步显示。

1、播放音频并获取当前时间

我们需要在音频播放过程中不断获取当前播放时间，并将其与歌词时间戳进行比较。可以使用setInterval或requestAnimationFrame来实现这一点。

const audio = document.getElementById('audio');
const lyrics = parseLyrics(lyricsText); // 假设lyricsText是已经读取的歌词文本
let currentIndex = 0;
function updateLyrics() {
    const currentTime = audio.currentTime * 1000; // 将当前播放时间转换为毫秒
    if (currentIndex < lyrics.length && currentTime >= lyrics[currentIndex].time) {
        displayLyrics(lyrics[currentIndex].text);
        currentIndex++;
    }
}
audio.addEventListener('timeupdate', updateLyrics);

在这个示例中，我们通过监听音频元素的timeupdate事件来获取当前播放时间，并根据时间戳数组中的值更新显示的歌词。

2、优化性能

在实际应用中，频繁地更新UI可能会影响性能。可以通过减少更新频率或优化算法来提高性能。例如，可以使用requestAnimationFrame来代替setInterval。

function updateLyrics() {
    const currentTime = audio.currentTime * 1000; // 将当前播放时间转换为毫秒
    if (currentIndex < lyrics.length && currentTime >= lyrics[currentIndex].time) {
        displayLyrics(lyrics[currentIndex].text);
        currentIndex++;
    }
    requestAnimationFrame(updateLyrics);
}
audio.addEventListener('play', () => {
    requestAnimationFrame(updateLyrics);
});

这种方法可以更高效地更新歌词显示，减少不必要的UI更新。

四、更新UI

在解析歌词文件和计算时间戳之后，我们需要将歌词同步显示在UI上。这可以通过动态更新HTML元素来实现。

1、显示当前歌词

我们可以在页面上创建一个HTML元素，用于显示当前的歌词文本。在updateLyrics函数中，当需要更新歌词时，修改这个元素的文本内容。

<div id="lyrics-display"></div>

function displayLyrics(text) {
    const lyricsDisplay = document.getElementById('lyrics-display');
    lyricsDisplay.textContent = text;
}

2、滚动显示歌词

为了更好的用户体验，可以实现滚动显示歌词。可以使用CSS和JavaScript结合来实现这一点。

<div id="lyrics-container">
    <div id="lyrics-display"></div>
</div>

#lyrics-container {
    height: 200px;
    overflow: hidden;
    position: relative;
}
#lyrics-display {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.3s;
}

let currentLine = 0;
function displayLyrics(text) {
    const lyricsDisplay = document.getElementById('lyrics-display');
    const line = document.createElement('div');
    line.textContent = text;
    lyricsDisplay.appendChild(line);
    currentLine++;
    lyricsDisplay.style.top = `-${currentLine * 20}px`; // 每行高度为20px
}

这种方法可以实现滚动显示歌词，使用户体验更加流畅。

五、同步多行歌词

在一些歌曲中，可能会出现多行歌词同时显示的情况。我们需要确保所有显示的歌词都能与音频播放时间同步。

1、处理多行歌词显示

我们可以在页面上创建多个HTML元素，每个元素显示一行歌词。当需要更新歌词时，修改这些元素的文本内容。

<div id="lyrics-container">
    <div class="lyrics-line" id="line-1"></div>
    <div class="lyrics-line" id="line-2"></div>
    <div class="lyrics-line" id="line-3"></div>
    <!-- 更多歌词行 -->
</div>

.lyrics-line {
    height: 20px;
    overflow: hidden;
}

function displayLyrics(text, lineIndex) {
    const line = document.getElementById(`line-${lineIndex}`);
    line.textContent = text;
}

2、动态调整歌词行数

为了适应不同长度的歌词，可以动态调整显示的歌词行数。可以通过JavaScript动态创建和删除歌词行。

function createLyricsLines(lineCount) {
    const container = document.getElementById('lyrics-container');
    container.innerHTML = ''; // 清空现有的歌词行
    for (let i = 0; i < lineCount; i++) {
        const line = document.createElement('div');
        line.className = 'lyrics-line';
        line.id = `line-${i}`;
        container.appendChild(line);
    }
}

这种方法可以根据需要动态调整显示的歌词行数，确保所有歌词都能正确显示。

六、优化用户体验

为了提高用户体验，可以添加一些额外的功能，如歌词高亮、歌词搜索等。

1、歌词高亮

可以通过CSS和JavaScript结合，实现当前播放的歌词高亮显示。

.lyrics-line.active {
    color: #ff0000; // 高亮颜色
}

function highlightLyrics(lineIndex) {
    const lines = document.querySelectorAll('.lyrics-line');
    lines.forEach(line => line.classList.remove('active'));
    const activeLine = document.getElementById(`line-${lineIndex}`);
    activeLine.classList.add('active');
}

在updateLyrics函数中，当需要更新歌词时，调用highlightLyrics函数来高亮当前歌词。

2、歌词搜索

可以添加一个搜索功能，让用户可以快速找到特定的歌词行。可以使用JavaScript实现一个简单的搜索功能。

<input type="text" id="search-input" placeholder="Search lyrics">
<div id="search-results"></div>

function searchLyrics(keyword) {
    const results = lyrics.filter(line => line.text.includes(keyword));
    const searchResults = document.getElementById('search-results');
    searchResults.innerHTML = ''; // 清空现有的搜索结果
    results.forEach(result => {
        const resultItem = document.createElement('div');
        resultItem.textContent = result.text;
        searchResults.appendChild(resultItem);
    });
}
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', () => {
    const keyword = searchInput.value;
    searchLyrics(keyword);
});

这种方法可以让用户快速找到特定的歌词行，提高用户体验。

七、总结

通过解析歌词文件、计算时间戳、更新UI和优化用户体验，可以实现一个功能完善的歌词同步功能。使用JavaScript和HTML/CSS结合，可以实现实时更新歌词显示、歌词高亮和歌词搜索等功能。希望这篇文章能对你实现歌词同步功能有所帮助。在实际应用中，可以根据具体需求进行进一步的优化和扩展。

此外，如果你正在管理一个项目团队，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以帮助你更高效地管理项目进度和团队协作。