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

最新推荐文章于 2022-09-29 17:52:34 发布

fenglin247

最新推荐文章于 2022-09-29 17:52:34 发布

阅读量1.2w

点赞数 22

分类专栏： JavaScript 文章标签： JavaScript JS audio标签歌词与音乐同步

本文链接：https://blog.csdn.net/fenglin247/article/details/86686151

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fenglin247

关注关注

22
点赞
踩
70

收藏

觉得还不错? 一键收藏
15
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

Zoey_J的博客

04-28

4174

打算自己做一个音乐播放网站，所以先提前试试水，看看单一个音乐播放器怎么做，慢慢地总算把基本功能都做出了，但不完美的是进度条和音量的还没加上，先这样吧，后期再慢慢完善吧~ 先看效果图： 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 条评论您还未登录，请先登录后发表或查看评论

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

01-24

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

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

09-18

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

JavaScript的歌词同步组件

weixin_30783629的博客

12-11

201

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

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

10-18

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

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

03-20

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

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

執筆冩回憶

01-09

4990

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

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

03-25

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

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

David_jiahuan的博客

06-01

6898

首先知道歌词文件的后缀名是 .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

3410

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

js实现音频歌词同步

玉案轩窗的博客

09-28

3301

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

js解析lrc 实现lrc歌词同步滚动效果

Zy的博客

11-26

1万+

这两天想着做一个h5的网页播放器，实现歌词同步滚动但是上网找了很多资料，竟发现没有比较完善的代码供参考，但是无意间看到了百度的千千音乐有这样的效果，就想着一定能通过js实现经过两三天的努力，终于做出了这样的效果实现功能歌词同步滚动同步歌词高亮效果代码实现首先，在body中加audio 和放歌词的ul标签 <div> <ul id="lrclist...