videojs播放mp3 显示lrc歌词

使用 Video.js 播放 MP3 并显示 LRC 歌词

Video.js 是一个流行的 HTML5 视频播放器库，它不仅支持视频播放，还可以用来播放音频文件。要实现播放 MP3 文件并显示 LRC 歌词，可以通过以下步骤来完成：

1. 引入 Video.js 库

首先，你需要在你的项目中引入 Video.js 的库文件。你可以通过 CDN 引入，也可以下载到本地。

Html

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Video.js  with LRC Lyrics</title>

<link href="https://vjs.zencdn.net/7.14.3/video-js.min.css"  rel="stylesheet">

<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>

</head>

<body>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">

<source src="your-audio-file.mp3"  type="audio/mp3">

<track kind="captions" src="your-lrc-file.lrc"  srclang="en" label="English">

</video>

2. 准备 LRC 歌词文件

LRC 文件是一种简单的文本文件，包含时间戳和歌词。例如：

Plaintext

复制

[00:00.00]Song Title

[00:05.00]This is the first line of the lyrics.

[00:10.00]This is the second line of the lyrics.

[00:15.00]And so on...

将这个文件保存为 your-lrc-file.lrc ，并与你的 MP3 文件放在同一目录下。

3. 配置 Video.js 以显示 LRC 歌词

在 Video.js 中，你可以使用 <track> 元素来加载 LRC 文件。<track> 元素的 kind 属性应设置为 captions，src 属性应设置为 LRC 文件的路径。

Html

复制

<track kind="captions" src="your-lrc-file.lrc" srclang="en" label="English">

4. 自定义样式和功能

Video.js 提供了许多自定义选项，你可以通过 CSS 和 JavaScript 来进一步定制歌词的显示效果。例如，你可以添加 CSS 样式来改变歌词的颜色和字体。

Css

复制

.vjs-text-track-cue {

color: white;

font-size: 20px;

background-color: rgba(0, 0, 0, 0.5);

}

5. 高级功能

如果你需要更复杂的歌词显示功能，例如滚动效果或高亮显示当前歌词行，可以考虑使用 JavaScript 来实现。以下是一个简单的示例：

Html

复制

<script>

var player = videojs('my-video');

player.on(‘timeupdate’, function() {
var currentTime = player.currentTime();
var cues = player.textTracks()[0].cues;

for (var i = 0; i < cues.length; i++) {
var cue = cues[i];
if (cue.startTime <= currentTime && cue.endTime >= currentTime) {
// Highlight the current cue
cue.element().style.color = ‘red’;
} else {
// Reset the color
cue.element().style.color = ‘white’;
}
}
});

player.play();
</script>

总结

通过以上步骤，你可以使用 Video.js 播放 MP3 文件并显示 LRC 歌词。Video.js 的灵活性和强大的 API 使得你可以轻松地实现各种自定义功能，满足不同的需求。