JavaScript解析lrc歌词并匹配时间显示在页面只显示代码
时间: 2023-09-06 10:05:05 浏览: 74
### 回答1:
好的,下面是 JavaScript 解析 lrc 歌词并匹配时间显示在页面的代码:
首先,你需要获取歌词文件并将其转换为 JavaScript 可以处理的格式。这里假设你已经将歌词文件读取到了一个字符串中,并且该字符串被存储在变量 `lrc` 中。
```
// 按行分割歌词字符串
const lines = lrc.split('\n');
// 将每行歌词转换为对象,并存储在数组中
const lyrics = lines.map(line => {
// 解析出时间标签
const time = line.match(/\[(\d{2}:\d{2}\.\d{2})\]/);
// 解析出歌词内容
const content = line.replace(/\[\d{2}:\d{2}\.\d{2}\]/, '');
// 如果没有时间标签或歌词内容,则忽略该行
if (!time || !content) return;
// 返回对象
return { time: time[1], content };
});
```
接下来,你需要在播放音乐时,定时获取当前播放时间,并将歌词与当前时间进行匹配。下面是一个示例代码,假设你已经有了一个能够播放音乐的 `audio` 元素:
```
// 创建定时器
let timer = setInterval(() => {
// 获取当前播放时间
const currentTime = audio.currentTime;
// 循环检查每一行歌词
for (let i = 0; i < lyrics.length; i++) {
// 获取当前歌词
const
### 回答2:
JavaScript可以通过解析LRC歌词文件来匹配时间并在页面中显示。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LRC歌词解析示例</title>
</head>
<body>
<div id="lyrics"></div>
<script>
// LRC歌词文件内容
var lrc = "[00:00.00] 歌曲名 - 歌手名\n[00:03.00] 第一句歌词\n[00:07.50] 第二句歌词\n[00:11.00] 第三句歌词";
// 解析LRC歌词
function parseLrc(lrc) {
var lines = lrc.split("\n"); // 按行分割歌词
var lyrics = []; // 存储解析后的歌词
// 遍历每行歌词
for (var i = 0; i < lines.length; i++) {
// 正则表达式匹配时间和歌词文本
var match = lines[i].match(/\[(\d{2}):(\d{2}\.\d{2})\](.+)/);
if (match) {
// 获取时间和歌词文本
var minutes = parseInt(match[1]);
var seconds = parseFloat(match[2]);
var text = match[3];
// 计算歌词显示时间(以秒为单位)
var time = minutes * 60 + seconds;
// 存储解析后的歌词
lyrics.push({
time: time,
text: text
});
}
}
return lyrics;
}
// 获取当前播放时间并匹配歌词
function displayLyrics(lyrics) {
var currentTime = 5.5; // 假设当前播放时间为5.5秒
// 遍历解析后的歌词
for (var i = 0; i < lyrics.length; i++) {
// 当前行歌词时间小于等于当前播放时间,且下一行歌词时间大于当前播放时间时显示该行歌词
if (lyrics[i].time <= currentTime && (i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)) {
document.getElementById('lyrics').innerText = lyrics[i].text; // 显示匹配的歌词
break;
}
}
}
// 解析并显示LRC歌词
var parsedLyrics = parseLrc(lrc);
displayLyrics(parsedLyrics);
</script>
</body>
</html>
```
使用以上代码,可以通过解析LRC歌词文件并匹配当前播放时间,实时在页面上显示匹配的歌词。请注意,示例中的时间和歌词文本仅做演示,您需要根据实际的LRC歌词文件和播放器等进行相应的调整。
### 回答3:
JavaScript可以解析和显示lrc歌词,通过以下示例代码来演示:
```
<!DOCTYPE html>
<html>
<head>
<title>Lrc歌词解析和匹配时间显示</title>
<script>
function parseLrc(lrcText) {
var lines = lrcText.split('\n');
var lrc = [];
for(var i = 0; i < lines.length; i++) {
var line = lines[i];
var matchTime = line.match(/\[(\d{2}):(\d{2}).(\d{2})\](.+)/);
if(matchTime) {
var minute = parseInt(matchTime[1]);
var second = parseInt(matchTime[2]);
var millisecond = parseInt(matchTime[3]);
var content = matchTime[4];
var time = minute * 60 * 1000 + second * 1000 + millisecond;
lrc.push({ time: time, content: content });
}
}
return lrc;
}
function showLrc(lrc) {
var lrcContainer = document.getElementById('lrc-container');
for(var i = 0; i < lrc.length; i++) {
var line = document.createElement('div');
line.innerHTML = lrc[i].content;
lrcContainer.appendChild(line);
}
}
// 歌词文本
var lrcText = '[00:00.00]第一句歌词\n[00:05.00]第二句歌词\n[00:10.00]第三句歌词';
// 解析歌词
var lrc = parseLrc(lrcText);
// 显示歌词
showLrc(lrc);
</script>
</head>
<body>
<div id="lrc-container"></div>
</body>
</html>
```
这段代码通过`parseLrc`函数来解析lrc歌词文本,将时间和歌词内容保存在数组`lrc`中。然后,使用`showLrc`函数将歌词内容逐行显示在id为`lrc-container`的div元素中。
你可以将歌词文本替换为你具体的lrc歌词文本,然后在浏览器中运行该页面,就可以看到歌词按照时间逐行显示在页面上。