用JS实现歌词与播放音乐同步

最新推荐文章于 2025-11-09 09:29:24 发布

原创

最新推荐文章于 2025-11-09 09:29:24 发布 · 1.3w 阅读

70 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JS #audio标签 #歌词与音乐同步

本文介绍了如何使用JavaScript解析LRC格式歌词并实现在播放音乐时同步高亮显示及滚动。首先，将歌词解析为JS对象，然后通过监听audio对象的timeupdate事件，结合currentTime属性实现歌词与播放的同步，利用CSS变换实现歌词滚动效果。

用JS实现歌词与播放音乐同步

第一步：把歌词解析成JS对象

参看我的上一篇文章：用JS解析LRC格式的歌词
解析后的歌词写到页面的一个列表中，效果如下：
音乐播放器
主要HTML代码：

<!-- 播放器 -->
<audio id="audio" src="media/沙漠骆驼 - 展展与罗罗.mp3" controls preload="auto"></audio>
<!-- 歌词 -->
<div class="lyric_area">
	<ul id="lyric"></ul>
</div>

CSS：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fenglin247

关注关注

22
点赞
踩
70

收藏

觉得还不错? 一键收藏
15
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js制作简易音乐播放器（歌词同步显示）

Zoey_J的博客

04-28

4352

打算自己做一个音乐播放网站，所以先提前试试水，看看单一个音乐播放器怎么做，慢慢地总算把基本功能都做出了，但不完美的是进度条和音量的还没加上，先这样吧，后期再慢慢完善吧~ 先看效果图： html部分  <textarea name="lrc" class="lrc-container" rows="15" cols="50" style="display...

JS歌词同步

03-25

NULL 博文链接：https://412599526-qq-com.iteye.com/blog/1159144

15 条评论您还未登录，请先登录后发表或查看评论

深入浅出：用 JavaScript 实现歌词同步滚动效果

最新发布

辰同学的博客

11-09

640

数据处理：通过正则表达式和字符串操作，将 LRC 文本解析为包含time和text的结构化数组。事件驱动：监听<audio>的timeupdate事件作为功能的核心驱动力。状态查找：在事件回调中，遍历数据，找到当前时间对应的歌词行索引。视图更新通过切换 CSS 类来高亮当前行。运用offsetTop等属性和居中滚动核心公式，计算出精确的滚动偏移量。使用高性能地执行滚动。掌握了这两个核心技术点，你不仅能实现歌词滚动，还能将其中的原理应用到其他需要将数据与滚动视图同步的场景中。

js实现的歌词同步（是像素级显示，不是一行一行显示）

01-24

纯手打js歌词同步功能，不是别人的行行显示，而是像素级显示（暂停播放会发现有些字只有半边变色）。重要部分已做了注释

js实现歌曲播放歌词同步，保证可以看懂，可以使用

09-18

偶然间看到了一个腾讯的歌词播放，最近一直在csdn上下载，找了一天也没弄好，还话费50买了积分，晚上八了一个腾讯的网站荣耀歌词动态显示，去除了话七八造的效果，还有简介的界面，保证可以使用，人人都能看得懂，我已经加好了注释，第一次发这个

JavaScript的歌词同步组件

weixin_30783629的博客

12-11

250

很久没发文，一直想写点东西，整理整理这阵子的心得，很多笔记都在整理中。最近给公司编写的一个JS UI，用于歌词同步，整理一下放出来，核心脚本只负责处理lrc格式的歌词和呈现，并提供同步功能。外部呈现等均可以良好定制。基本调用如下：var lrc=new LRC({lyricTable:obj,lyricWrapper:obj,curRowClassName:'xx',lyric:'xxx',s...

用JS解析LRC格式的歌词，实现歌词同步滚动效果

執筆冩回憶

01-09

5559

用JS解析LRC格式的歌词 1、把歌词载入。方法一：直接把歌词粘贴到一个textarea文本域中，然后把它设置为隐藏。  <textarea id="lrc_content" cols="30" style="display: none"> [ti:沙漠骆驼] [ar:展展与罗罗] [al:沙漠骆驼] [by:0] [offset:0]...

原生JS实现网页手机音乐播放器歌词同步播放的示例

10-18

今天，我们将探讨如何使用原生JavaScript实现一个网页手机音乐播放器，该播放器不仅能够播放音乐，还能同步显示歌词。以下知识点将详细解读实现该功能所需掌握的技术细节。首先，实现音乐播放器的基本思路是从HTML...

jQuery音乐播放歌词同步显示特效代码

03-20

在音乐播放器中，jQuery主要用于控制音乐播放、暂停、切换歌曲等交互功能，并实现歌词与音乐的同步滚动效果。该特效代码的核心在于如何实现歌词的动态更新。在js文件中，你需要创建一个定时器来监听音乐的播放进度...

JS 网页播放器实现歌词同步

03-25

NULL 博文链接：https://412599526-qq-com.iteye.com/blog/1157437

js 实现音乐播放器中歌词与歌曲同步的原理

David_jiahuan的博客

06-01

7220

首先知道歌词文件的后缀名是 .lrc （lyric歌词的缩写）；接着知道.lrc 文件的一般格式是 [** : ** . ***] 歌词内容（时间的tag标签组成）：===========================================================知道上面这些后，就不难知道怎么实现歌词和歌曲同步了： 1、首先逐行解析每句歌词； 2、利用正则表达式等方...

Aplayer.js实现歌词同步

05-18

Aplayer.js实现歌词同步

html+js的lrc歌词同步播放器

03-25

NULL 博文链接：https://412599526-qq-com.iteye.com/blog/1156467

JavaScript歌词同步改进版

01-07

JavaScript歌词同步改进版,希望大家喜欢.

jQuery歌词同步网页MP3播放器代码APlayer.js插件

04-01

jQuery歌词同步网页MP3播放器代码APlayer.js插件，共同学习提高！

JS实现歌词同步滚动效果

热门推荐

maid_04的博客

06-28

2万+

实现歌词同步滚动效果，首先要用audio标签引入音频 <div id="h_center1"> <span>当前播放：</span> <span>大鱼海棠</span> <audio id="now_music" src="双笙 - 大鱼.mp3

JavaScript-歌词展示与音乐同步

m0_51315555的博客

09-29

4340

一、歌词数据 1、歌词加载 2、把歌词解析为JS对象 3、把搜集好的歌词信息，展示到页面上 4、整体代码二、歌词与音乐同步 1、歌词和音乐展示 2、歌词和音乐同步，当前行高亮，随播放滚动

js实现音频歌词同步

玉案轩窗的博客

09-28

3617

前言之前通过js实现音频、视频播放，此文是实现音频与歌词同步播放的实现，主要是用于学习实现思想，本文需要想要了解的知识点如下：如何实现音频与歌词同步？如何改变浏览器默认的滚动条样式？实现此文实现只专注于实现思想，没有去处理兼容性细节，请使用Chrome来查看，下面主要说说音频与歌词同步的实现思路：歌词文件是.lrc格式的，改文件中的内容形式如下：从上图中可以看出是由时间点+歌词内容

实现音乐播放与歌词同步的jQuery插件代码

实现歌词同步的常见方式是通过LRC格式的歌词文件。LRC歌词文件是一种纯文本格式的歌词文件，它包含时间和歌词内容的对应关系，能够被播放器识别并同步显示。 ### APlayer播放器插件应用 APlayer是一款基于Web的...