歌词监听自动播放-CSDN博客

本文链接：https://blog.csdn.net/qq_52928592/article/details/129230629

该代码示例展示了如何使用HTML、CSS和JavaScript实现音频播放时动态显示歌词的功能。通过监听audio元素的timeupdate事件，实时匹配当前播放时间点对应的歌词并显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

.lyricshow {

width: 600px;

height: 100px;

text-align: center;

font-size: 30px;

line-height: 100px;

margin-top: 40px;

}

</style>

</head>

<body>

let str = `[00:00.43]爱如火

[00:00.93]演唱：那艺娜

[00:01.43]作词：卫婷婷

[00:01.95]作曲：卫婷婷

[00:02.69]监制：张大志/张爱国

[00:03.44]制作人：卫婷婷

[00:04.19]编曲混音：哈魔音乐

[00:04.93]制作发行：哈魔音乐

[00:05.43]录音棚：北京哈魔音乐录音棚

[00:06.19]出品：北京群星伟业

[00:07.43]心在跳是爱情如烈火

[00:10.95]你在笑疯狂的人是我

[00:14.68]爱如火会温暖了心窝

[00:18.43]我看见爱的火焰闪烁

[00:22.19]心在跳是爱情如烈火

[00:25.68]你在笑疯狂的人是我

[00:29.44]爱如火会温暖了心窝

[00:33.18]我看见爱的火焰闪烁

[00:51.95]燃烧那爱情的火焰

[00:55.69]取一把烈火在人间

[00:59.44]红尘里爱恨一瞬间

[01:02.69]可曾记得彼此的脸

[01:06.44]你的爱在眼里流淌

[01:10.68]爱情它如火般荡漾

[01:14.20]我的心早为你疯狂

[01:17.94]爱如火在燃烧碰撞

[01:25.18]心在跳是爱情如烈火

[01:28.69]你在笑疯狂的人是我

[01:32.20]爱如火会温暖了心窝

[01:35.94]我看见爱的火焰闪烁

[01:39.70]心在跳是爱情如烈火

[01:43.43]你在笑疯狂的人是我

[01:46.94]爱如火会温暖了心窝

[01:50.68]我看见爱的火焰闪烁

[02:09.44]燃烧那爱情的火焰

[02:13.19]取一把烈火在人间

[02:16.94]红尘里爱恨一瞬间

[02:20.68]可曾记得彼此的脸

[02:24.44]你的爱在眼里流淌

[02:28.18]爱情它如火般荡漾

[02:31.68]我的心早为你疯狂

[02:35.44]爱如火在燃烧碰撞

[02:42.69]心在跳是爱情如烈火

[02:46.18]你在笑疯狂的人是我

[02:49.68]爱如火会温暖了心窝

[02:53.43]我看见爱的火焰闪烁

[02:57.18]心在跳是爱情如烈火

[03:00.94]你在笑疯狂的人是我

[03:04.69]爱如火会温暖了心窝

[03:08.19]我看见爱的火焰闪烁`;

let audio = document.querySelector("audio");

let lyricshow = document.querySelector(".lyricshow");

// 监听audio播放 timeupdate

audio.addEventListener("timeupdate", function () {

// 1.获取当前播放的时间

// 当前播放的时间 :currentTime 秒

// 当前文件的总时长 :duration 秒

let minite = parseInt(this.currentTime / 60)

.toString()

.padStart(2, 0);

let seconds = parseInt(this.currentTime % 60)

.toString()

.padStart(2, 0);

let newstr = `${minite}:${seconds}`;

// .+ 至少前的字符至少出现一次

// let reg1 = new RegExp(`\\[${newstr}\\.\\d{2}\\](.+)`)

let reg1 = new RegExp(`\\[${newstr}\\.\\d{2}\\](.+)`);

// exec() 返回值是数组数组中第一个元素是匹配的字符串,第二个元素是匹配的相关文本

lyricshow.innerHTML = reg1.exec(str)[1];

});

</script>