1. PingCode智库首页
  2. 百科

js歌词怎么和歌曲绑定

Edit1 • • 百科

js歌词怎么和歌曲绑定

一、JS歌词怎么和歌曲绑定

通过时间戳同步、使用JavaScript库如Lyric.js、实现歌词滚动效果。其中，通过时间戳同步是最常用的一种方法，它可以确保歌词和歌曲的播放时间精确匹配。实现这一方法需要将歌词文件与歌曲文件中的时间戳相对应，并在JavaScript中编写代码来读取和同步这些时间戳。

通过时间戳同步，可以将每一行歌词的时间戳与歌曲播放的当前时间进行比较，当歌曲播放到某个时间点时，自动显示对应的歌词。这样，用户在听歌的同时，可以看到准确的歌词显示，提升用户体验。

通过时间戳同步的详细描述：首先需要准备一个带有时间戳的歌词文件（通常是LRC文件），这个文件格式类似于字幕文件，包含了每行歌词的文本和对应的时间戳。接下来，在JavaScript中读取这个文件并解析出时间戳和歌词文本。然后，通过监听歌曲的播放时间，当播放时间与某个时间戳匹配时，更新显示的歌词。通过定时器或事件监听器可以实现精确同步。

二、解析歌词文件

解析歌词文件是实现歌词和歌曲同步的第一步。常见的歌词文件格式是LRC文件，它包含了每行歌词的文本和对应的时间戳。

1、LRC文件格式

LRC文件格式是最常见的歌词文件格式之一。它的基本结构如下：

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


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


[00:21.10]这是第三句歌词

每行歌词由一个时间戳和对应的文本组成，时间戳的格式为[分钟:秒.毫秒]。

2、解析LRC文件

在JavaScript中，可以通过读取LRC文件并解析出时间戳和歌词文本来实现。以下是一个简单的解析LRC文件的示例：

function parseLRC(lrc) {


    const lines = lrc.split('n');


    const result = [];


    const timeReg = /[(d{2}):(d{2}).(d{2})]/;


    lines.forEach(line => {


        const timeMatch = line.match(timeReg);


        if (timeMatch) {


            const minutes = parseInt(timeMatch[1], 10);


            const seconds = parseInt(timeMatch[2], 10);


            const milliseconds = parseInt(timeMatch[3], 10);


            const time = minutes * 60 + seconds + milliseconds / 100;


            const text = line.replace(timeReg, '').trim();


            result.push({ time, text });


        }


    });


    return result;


}

三、同步歌词和歌曲

在解析出歌词文件后，需要将其与歌曲的播放时间同步。可以通过监听歌曲的播放时间来实现这一点。

1、获取歌曲的播放时间

在HTML5中，<audio>元素提供了获取歌曲播放时间的方法。通过currentTime属性，可以获取歌曲当前的播放时间。

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



const audio = document.getElementById('audio');


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


    const currentTime = audio.currentTime;


    // 根据当前时间更新歌词


});

2、更新显示歌词

在获取歌曲的当前播放时间后，可以根据时间戳来更新显示的歌词。以下是一个简单的示例：

const lyrics = parseLRC(yourLRCFileContent);


const lyricsContainer = document.getElementById('lyrics-container');


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


    const currentTime = audio.currentTime;


    const currentLyric = lyrics.find(lyric => lyric.time <= currentTime);


    if (currentLyric) {


        lyricsContainer.textContent = currentLyric.text;


    }


});

四、实现歌词滚动效果

为了提升用户体验，可以实现歌词的滚动效果，使当前播放的歌词始终显示在视图中央。

1、创建滚动歌词容器

首先，需要创建一个滚动歌词的容器。可以使用HTML和CSS来实现：

<div id="lyrics-container" class="lyrics-container">


    <div id="lyrics" class="lyrics"></div>


</div>



.lyrics-container {


    overflow-y: auto;


    height: 200px;


}


.lyrics {


    line-height: 1.5;


}

2、更新滚动歌词

在JavaScript中，可以通过动态更新歌词容器的scrollTop属性来实现滚动效果：

const lyricsContainer = document.getElementById('lyrics-container');


const lyricsElement = document.getElementById('lyrics');


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


    const currentTime = audio.currentTime;


    const currentLyricIndex = lyrics.findIndex(lyric => lyric.time > currentTime) - 1;


    if (currentLyricIndex >= 0) {


        const currentLyric = lyrics[currentLyricIndex];


        const previousLyric = lyrics[currentLyricIndex - 1];


        if (previousLyric && previousLyric.text !== currentLyric.text) {


            const currentLine = lyricsElement.children[currentLyricIndex];


            lyricsContainer.scrollTop = currentLine.offsetTop - lyricsContainer.clientHeight / 2;


        }


    }


});

五、使用JavaScript库

为了简化开发过程，可以使用现成的JavaScript库来实现歌词和歌曲的绑定。例如，Lyric.js是一个轻量级的JavaScript库，可以帮助你快速实现歌词同步和滚动效果。

1、安装Lyric.js

可以通过npm或直接下载Lyric.js库来使用：

npm install lyric.js

2、使用Lyric.js

以下是一个使用Lyric.js的示例：

import Lyric from 'lyric.js';


const lrc = `


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


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


[00:21.10]这是第三句歌词


`;


const audio = document.getElementById('audio');


const lyricsContainer = document.getElementById('lyrics-container');


const lyric = new Lyric(lrc, ({ lineNum, txt }) => {


    const lineElement = document.createElement('div');


    lineElement.textContent = txt;


    lyricsContainer.appendChild(lineElement);


});


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


    lyric.seek(audio.currentTime * 1000);


});

六、处理不同格式的歌词文件

除了LRC文件格式，可能还会遇到其他格式的歌词文件，如SRT（SubRip Subtitle）格式。需要根据不同的格式编写相应的解析代码。

1、解析SRT文件

SRT文件格式通常用于字幕文件，它的基本结构如下：

1


00:00:12,000 --> 00:00:17,200


这是第一句歌词


2


00:00:17,200 --> 00:00:21,100


这是第二句歌词

以下是一个解析SRT文件的示例：

function parseSRT(srt) {


    const lines = srt.split('nn');


    const result = [];


    const timeReg = /(d{2}):(d{2}):(d{2}),(d{3})/;


    lines.forEach(line => {


        const parts = line.split('n');


        if (parts.length >= 3) {


            const timeMatchStart = parts[1].match(timeReg);


            const timeMatchEnd = parts[1].match(timeReg);


            if (timeMatchStart && timeMatchEnd) {


                const startTime = parseTime(timeMatchStart);


                const text = parts.slice(2).join('n').trim();


                result.push({ time: startTime, text });


            }


        }


    });


    return result;


}


function parseTime(timeMatch) {


    const hours = parseInt(timeMatch[1], 10);


    const minutes = parseInt(timeMatch[2], 10);


    const seconds = parseInt(timeMatch[3], 10);


    const milliseconds = parseInt(timeMatch[4], 10);


    return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;


}

七、优化用户体验

在实现基本功能的基础上，可以进一步优化用户体验，提升歌词和歌曲同步的效果。

1、添加高亮效果

可以通过CSS为当前播放的歌词添加高亮效果，使其更加显眼：

.lyrics .current {


    color: red;


    font-weight: bold;


}

在JavaScript中，可以动态添加和移除高亮效果的CSS类：

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


    const currentTime = audio.currentTime;


    const currentLyricIndex = lyrics.findIndex(lyric => lyric.time > currentTime) - 1;


    if (currentLyricIndex >= 0) {


        const currentLine = lyricsElement.children[currentLyricIndex];


        Array.from(lyricsElement.children).forEach(line => line.classList.remove('current'));


        currentLine.classList.add('current');


        lyricsContainer.scrollTop = currentLine.offsetTop - lyricsContainer.clientHeight / 2;


    }


});

2、支持用户手动调整时间

为了应对歌词和歌曲不同步的情况，可以提供一个界面，允许用户手动调整时间，使歌词和歌曲同步。可以添加一个时间调整控件，如滑动条或输入框，让用户输入时间偏移量：

<input type="range" id="timeOffset" min="-10" max="10" step="0.1" value="0">

在JavaScript中，监听时间调整控件的变化，并根据偏移量更新歌词的显示时间：

const timeOffset = document.getElementById('timeOffset');


timeOffset.addEventListener('input', () => {


    const offset = parseFloat(timeOffset.value);


    audio.currentTime += offset;


});

八、总结

通过时间戳同步、使用JavaScript库如Lyric.js、实现歌词滚动效果，是实现JS歌词和歌曲绑定的关键步骤。解析歌词文件、同步歌词和歌曲、实现滚动效果、使用现成的JavaScript库、处理不同格式的歌词文件、优化用户体验等方面的详细描述，为开发者提供了全面的解决方案。

在开发过程中，可以根据具体需求选择合适的方法和工具，并不断优化用户体验，确保歌词和歌曲的同步效果达到最佳状态。通过这些步骤，可以实现一个功能完善、用户体验良好的歌词和歌曲同步系统。

相关问答FAQs：

1. 如何在网页中实现歌词和歌曲的同步显示？

  • 使用JavaScript编写一个函数，通过获取当前歌曲的播放时间来实现歌词的同步显示。
  • 通过给每一行歌词添加一个时间戳，然后在播放音乐时，根据当前播放时间匹配对应的歌词行，实现歌词的同步显示。

2. 在网页中如何将歌词和音乐进行绑定？

  • 首先，将歌词文件保存为一个文本文件，并通过JavaScript的Ajax技术将歌词文件读取到网页中。
  • 其次，使用HTML5的
  • 当用户点击播放按钮时，触发JavaScript函数，同时开始播放音乐和歌词的显示。

3. 如何实现歌词的滚动显示效果？

  • 在HTML中创建一个固定高度的容器，用于显示歌词。
  • 使用CSS设置容器的overflow属性为hidden，使得超出容器高度的歌词行隐藏。
  • 通过JavaScript实时计算当前播放时间对应的歌词行的位置，并通过改变容器的scrollTop属性实现歌词的滚动显示效果。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3561622

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部