js怎么判断当前歌词

JS判断当前歌词的方法、步骤和技术解析

JS判断当前歌词的方法包括：通过时间戳判断、利用歌词文件解析、同步播放进度、多媒体事件监听。本文将详细介绍这些方法的具体实现，并结合实际案例进行说明。

一、时间戳判断

时间戳判断是最常用的方式，即通过比较音频播放的当前时间和歌词中每行的时间戳来判断当前播放的歌词。

时间戳解析

在大多数歌词文件中，歌词是以时间戳格式标记的。常见的格式如 [mm:ss.xx]，其中 mm 为分钟，ss.xx 为秒和毫秒。例如：

[00:01.00]这是第一句歌词

[00:05.00]这是第二句歌词

实现步骤

1. 解析歌词文件：将歌词文件解析成一个对象数组，每个对象包含时间和歌词文本。
2. 获取当前播放时间：使用 JavaScript 获取音频或视频的当前播放时间。
3. 比较时间戳：循环遍历歌词数组，找到与当前播放时间最接近且未超过的时间戳，即为当前播放的歌词。

代码实现

const lyrics = `

[00:01.00]这是第一句歌词
[00:05.00]这是第二句歌词
`;
function parseLyrics(lyrics) {
    const lines = lyrics.split('n');
    const result = [];
    const timeRegExp = /[(d{2}):(d{2}).(d{2})]/;
    for (let line of lines) {
        const match = timeRegExp.exec(line);
        if (match) {
            const minutes = parseInt(match[1], 10);
            const seconds = parseInt(match[2], 10);
            const milliseconds = parseInt(match[3], 10);
            const time = minutes * 60 + seconds + milliseconds / 100;
            const text = line.replace(timeRegExp, '').trim();
            result.push({ time, text });
        }
    }
    return result;
}
const parsedLyrics = parseLyrics(lyrics);
function getCurrentLyric(currentTime, parsedLyrics) {
    for (let i = 0; i < parsedLyrics.length; i++) {
        if (currentTime < parsedLyrics[i].time) {
            return parsedLyrics[i - 1] ? parsedLyrics[i - 1].text : '';
        }
    }
    return parsedLyrics[parsedLyrics.length - 1].text;
}
// 示例：假设当前音频播放时间为3秒
const currentTime = 3;
const currentLyric = getCurrentLyric(currentTime, parsedLyrics);
console.log(currentLyric);

在上述代码中，我们首先解析歌词文件，将其转换为包含时间和文本的对象数组。然后，通过比较当前播放时间和歌词数组中的时间戳，找出当前播放的歌词。

二、利用歌词文件解析

歌词文件解析是指将歌词文件中的内容逐行解析，并将每行歌词与其对应的时间戳关联起来。

步骤解析

1. 读取歌词文件：通过 AJAX 或 Fetch API 读取歌词文件内容。
2. 解析时间戳：将歌词文件内容逐行解析，并提取其中的时间戳和歌词文本。
3. 存储歌词数据：将解析后的歌词数据存储在一个数组或对象中，便于后续查询。

代码实现

async function fetchLyrics(url) {

    const response = await fetch(url);
    const text = await response.text();
    return parseLyrics(text);
}
// 示例：假设歌词文件的 URL 为 'lyrics.txt'
fetchLyrics('lyrics.txt').then(parsedLyrics => {
    console.log(parsedLyrics);
});

上述代码中，通过 Fetch API 读取歌词文件，并调用 parseLyrics 函数进行解析。

三、同步播放进度

同步播放进度是指在音频或视频播放的过程中，实时更新当前播放的歌词。

实现步骤

1. 获取音频播放对象：获取音频或视频元素对象。
2. 监听播放事件：通过 timeupdate 事件监听音频或视频的播放进度。
3. 实时更新歌词：在播放进度更新时，调用函数获取当前播放的歌词，并更新显示。

代码实现

<audio id="audio" src="audio.mp3" controls></audio>

<div id="lyrics"></div>
<script>
    const audio = document.getElementById('audio');
    const lyricsContainer = document.getElementById('lyrics');
    audio.addEventListener('timeupdate', () => {
        const currentTime = audio.currentTime;
        const currentLyric = getCurrentLyric(currentTime, parsedLyrics);
        lyricsContainer.innerText = currentLyric;
    });
</script>

在上述代码中，通过 timeupdate 事件监听音频的播放进度，并实时更新歌词显示。

四、多媒体事件监听

多媒体事件监听是指通过监听音频或视频元素的各种事件，如 play、pause、timeupdate 等，来实现歌词的同步显示。

事件解析

1. play：当音频或视频开始播放时触发。
2. pause：当音频或视频暂停时触发。
3. timeupdate：当音频或视频的播放进度更新时触发。
4. ended：当音频或视频播放结束时触发。

代码实现

audio.addEventListener('play', () => {

    console.log('音频开始播放');
});
audio.addEventListener('pause', () => {
    console.log('音频暂停');
});
audio.addEventListener('ended', () => {
    console.log('音频播放结束');
});

通过监听音频或视频元素的各种事件，可以实现更精细的播放控制和歌词同步。

五、结合实际案例

项目结构

在实际项目中，可以将歌词解析和显示功能封装成一个独立的模块，便于复用和维护。

示例项目

<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌词同步显示</title>
    <style>
        #lyrics {
            font-size: 20px;
            line-height: 1.5;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <audio id="audio" src="audio.mp3" controls></audio>
    <div id="lyrics"></div>
    <script>
        async function fetchLyrics(url) {
            const response = await fetch(url);
            const text = await response.text();
            return parseLyrics(text);
        }
        function parseLyrics(lyrics) {
            const lines = lyrics.split('n');
            const result = [];
            const timeRegExp = /[(d{2}):(d{2}).(d{2})]/;
            for (let line of lines) {
                const match = timeRegExp.exec(line);
                if (match) {
                    const minutes = parseInt(match[1], 10);
                    const seconds = parseInt(match[2], 10);
                    const milliseconds = parseInt(match[3], 10);
                    const time = minutes * 60 + seconds + milliseconds / 100;
                    const text = line.replace(timeRegExp, '').trim();
                    result.push({ time, text });
                }
            }
            return result;
        }
        function getCurrentLyric(currentTime, parsedLyrics) {
            for (let i = 0; i < parsedLyrics.length; i++) {
                if (currentTime < parsedLyrics[i].time) {
                    return parsedLyrics[i - 1] ? parsedLyrics[i - 1].text : '';
                }
            }
            return parsedLyrics[parsedLyrics.length - 1].text;
        }
        const audio = document.getElementById('audio');
        const lyricsContainer = document.getElementById('lyrics');
        fetchLyrics('lyrics.txt').then(parsedLyrics => {
            audio.addEventListener('timeupdate', () => {
                const currentTime = audio.currentTime;
                const currentLyric = getCurrentLyric(currentTime, parsedLyrics);
                lyricsContainer.innerText = currentLyric;
            });
        });
    </script>
</body>
</html>

在该示例项目中，通过封装歌词解析和显示功能，实现了歌词的同步显示。

总结

通过时间戳判断、利用歌词文件解析、同步播放进度、多媒体事件监听等方法，可以实现 JavaScript 判断当前歌词的功能。通过实际案例的讲解，帮助读者更好地理解和应用这些技术。在项目管理中，如果需要管理和协作相关任务，可以考虑使用研发项目管理系统PingCode或通用项目协作软件Worktile，这些工具可以提高团队的协作效率和项目管理水平。

相关问答FAQs：

1. 如何利用JavaScript判断当前歌词的位置？

JavaScript可以通过一些技术手段来判断当前歌词的位置。以下是一种常见的方法：

• 使用<audio>标签和ontimeupdate事件：你可以将音频文件嵌入到页面中的<audio>标签中，并使用ontimeupdate事件来监听音频的播放进度。通过获取当前播放时间，结合歌词的时间轴，你可以判断当前所唱的歌词。

2. 如何将歌词和音频文件进行同步？

要实现歌词和音频文件的同步播放，你可以按照以下步骤进行操作：

• 解析歌词文件：将歌词文件解析为一段段的歌词文本，并提取出每句歌词所对应的时间戳。

• 监听音频播放进度：使用ontimeupdate事件来监听音频的播放进度，获取当前播放的时间。

• 匹配当前播放时间和歌词时间戳：将当前播放时间与歌词时间戳进行比较，找到与当前播放时间最接近的歌词时间戳。

• 显示当前歌词：将匹配到的歌词显示在页面上，以便用户可以看到当前所唱的歌词。

3. 如何实现歌词高亮显示？

为了使用户能够更清楚地看到当前所唱的歌词，你可以使用以下方法来实现歌词的高亮显示：

• 使用HTML和CSS：将歌词以文本形式显示在HTML页面上，并使用CSS样式来设置高亮显示的样式，例如改变文字颜色、加粗、背景颜色等。

• 动态切换样式：根据当前播放的歌词，使用JavaScript动态切换样式，将当前歌词高亮显示。

• 更新歌词显示位置：根据当前播放的歌词，使用JavaScript动态调整歌词的显示位置，确保当前歌词始终处于可见范围内。

希望以上内容能够帮助你理解如何使用JavaScript来判断当前歌词的位置，并实现歌词的同步和高亮显示。如果还有其他问题，请随时提问。