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

最新推荐文章于 2023-07-18 20:26:02 发布
最新推荐文章于 2023-07-18 20:26:02 发布
阅读量1.2w 收藏 70
点赞数 22
分类专栏： JavaScript 文章标签： JavaScript JS audio标签 歌词与音乐同步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenglin247/article/details/86686151
版权

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

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

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

<!-- 播放器 -->
<audio id="audio" src="media/沙漠骆驼 - 展展与罗罗.mp3" controls preload="auto"></audio>
<!-- 歌词 -->
<div class="lyric_area">
	<ul id="lyric"></ul>
最低0.47元/天 解锁文章
fenglin247
关注
  • 22
    点赞
  • 踩
  • 70
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
HTML5原生态JS的音乐播放器-带lRC歌词分析.rar
03-21
HTML5 原生态 JS 的音乐播放器。能上一首，下一首进行切换。并且可以分析 LRC 歌词。 歌词文件采用 AJAX 加载。
js解析lrc 实现lrc歌词同步滚动效果
热门推荐
Zy的博客
11-26 1万+
这两天想着做一个h5的网页播放器，实现歌词同步滚动 但是上网找了很多资料，竟发现没有比较完善的代码供参考，但是无意间看到了百度的千千音乐有这样的效果，就想着一定能通过js实现 经过两三天的努力，终于做出了这样的效果 实现功能 歌词同步滚动 同步歌词高亮效果 代码实现 首先，在body中加audio 和 放歌词的ul标签 <div> <ul id="lrclist...
JS实现歌词播放，正则匹配歌词，时间
最新发布
qq_51660806的博客
07-18 355
JS实现歌词播放，正则匹配歌词，时间
JavaScript-歌词展示与音乐同步
m0_51315555的博客
09-29 2800
一、歌词数据 1、歌词加载 2、把歌词解析为JS对象 3、把搜集好的歌词信息，展示到页面上 4、整体代码 二、歌词与音乐同步 1、歌词和音乐展示 2、歌词和音乐同步，当前行高亮，随播放滚动
js实现歌词跟随滚动
进击的程序猿
04-25 3857
基本上仿写了这个，但是上面那个实现的效果里没有实现快进和后退的功能，我在上面的基础上，增加了快进和后退 不多说，直接上代码 样式部分 <style> * { margin: 0; padding: 0; } .lrc_content { display...
用JS解析LRC格式的歌词，实现歌词同步滚动效果
執筆冩回憶
01-09 4751
用JS解析LRC格式的歌词 1、把歌词载入。 方法一：直接把歌词粘贴到一个textarea文本域中，然后把它设置为隐藏。 <!-- LRC歌词 --> <textarea id="lrc_content" cols="30" style="display: none"> [ti:沙漠骆驼] [ar:展展与罗罗] [al:沙漠骆驼] [by:0] [offset:0]...
js制作简易音乐播放器（歌词同步显示）
Zoey_J的博客
04-28 4094
打算自己做一个音乐播放网站，所以先提前试试水，看看单一个音乐播放器怎么做，慢慢地总算把基本功能都做出了，但不完美的是进度条和音量的还没加上，先这样吧，后期再慢慢完善吧~ 先看效果图： html部分 <!--歌词存放区--> <textarea name="lrc" class="lrc-container" rows="15" cols="50" style="display...
原生JS实现网页手机音乐播放器 歌词同步播放的示例
10-18
下面小编就为大家分享一篇原生JS实现网页手机音乐播放器 歌词同步播放的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js实现歌曲播放歌词同步，保证可以看懂，可以使用
09-18
偶然间看到了一个腾讯的歌词播放，最近一直在csdn上下载，找了一天也没弄好，还话费50买了积分，晚上八了一个腾讯的网站荣耀歌词动态显示，去除了话七八造的效果，还有简介的界面，保证可以使用，人人都能看得懂，我...
jQuery音乐播放歌词同步显示特效代码
03-20
jQuery音乐播放歌词同步显示代码是一款简单实用的mp3音乐播放器代码，歌词调用写在js文件里面可自行修改。
jQuery音乐播放歌词同步显示代码
06-24
jQuery音乐播放歌词同步显示代码是一款简单实用的mp3音乐播放器代码，歌词调用写在js文件里面可自行修改。
js 实现音乐播放器中歌词与歌曲同步的原理
David_jiahuan的博客
06-01 6819
首先知道歌词文件的后缀名是 .lrc （lyric歌词的缩写）；接着知道.lrc 文件的一般格式是 [** : ** . ***] 歌词内容（时间的tag标签组成）：===========================================================知道上面这些后，就不难知道怎么实现歌词和歌曲同步了：    1、首先逐行解析每句歌词；    2、利用正则表达式等方...
html5音乐和歌词同步,HTML5实现歌词同步
weixin_42511879的博客
06-04 1503
开篇HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签。audio标签实现一个audio标签非常简单，对应的html代码如下：src="music/我在人民广场吃炸鸡.mp3"autoplay controls>上述代码不需要一行js脚本就能实现音乐播放。其中有三个常用的属性...
原生JS实现在线音乐播放器及歌词滚动
学习交流记录
06-22 1988
原生JS实现在线音乐播放器及歌词滚动
用JavaScript在Web中显示Mp3的歌词
zh33gl的专栏
10-25 841
function ShowLyrics(){  if( player.currentMedia && ( player.currentMedia.getAttributeCountByType("WM/Lyrics","") > 0 ) )        {                var strLyrics = player.currentMedia.getItemInfo("WM/Lyr
JS原生---歌词滚动效果案例
llllllllolllllll的博客
03-05 2150
font-size的改变就导致了元素几何信息的变化，几何信息的变化就意味着会导致reflow，会使页面重新布局，影响效率。 而transform 变形，并不是在渲染主线程中执行，不占用主线程，而是在合成线程中执行，最终的实现也是交给cpu，所以不会导致页面重新布局，不影响效率。
原生JS音乐歌词播放页面
Y_qilin_的博客
08-14 590
原生JS音乐歌词播放页面html页面结构css页面样式JS页面行为歌词高度计算图 html页面结构 整个页面的结构分为音乐播放部分和歌词滚动部分。两部分放在一个div标签下。音乐文件采用audio标签引入放在页面顶端，歌词文本放入div>ul>li嵌套标签 <!DOCTYPE html> <html> <head> <title>原生JS音乐歌词滚动</title> <link rel="stylesheet" type="t
JS-歌词滚动效果
qq_53109172的博客
12-14 2183
本文案例为歌词滚动，随着音乐播放的进度同步滚动，本案例的源码在文章首部即可获取，html、css、js均为单独文件，案例的实现详解可根据需要可在本文后续内容查看
js歌词滚动效果
u014736007的博客
07-03 368
主要是自己练习的记录作品
html实现音乐歌词同步
05-03
实现音乐歌词同步可以借助 HTML5 的 `<audio>` 标签和 JavaScript。 首先，需要将歌词文本保存到一个数组中，每一行歌词对应一个数组元素。同时，将每一行歌词的时间戳也保存到一个数组中，时间戳的格式可以是秒数或者毫秒数。 然后，使用 `<audio>` 标签加载音乐文件，并通过 JavaScript 监听 `<audio>` 标签的 `timeupdate` 事件，获取当前播放时间，根据当前时间匹配歌词数组中对应的时间戳，找到当前应该显示的歌词。 最后，将当前歌词显示在页面中，可以使用 `<div>` 标签或者 `<p>` 标签，样式可以通过 CSS 进行设置。同时，为了美观和易于阅读，可以将当前歌词高亮显示，并将其它歌词以灰色显示。 下面是一个简单的示例代码： HTML: ```html <audio id="music" src="music.mp3"></audio> <div id="lyrics"></div> ``` JavaScript: ```javascript var lyrics = [ {time: 0, text: "Verse 1 is here"}, {time: 10, text: "Chorus 1 is here"}, {time: 20, text: "Verse 2 is here"}, {time: 30, text: "Chorus 2 is here"}, {time: 40, text: "Bridge is here"}, {time: 50, text: "Chorus 3 is here"} ]; var music = document.getElementById("music"); var lyricsDiv = document.getElementById("lyrics"); music.addEventListener("timeupdate", function() { var currentTime = music.currentTime; for (var i = 0; i < lyrics.length; i++) { if (currentTime >= lyrics[i].time && (i == lyrics.length - 1 || currentTime < lyrics[i + 1].time)) { lyricsDiv.innerHTML = lyrics[i].text; lyricsDiv.style.color = "#333"; if (i > 0) { var prevLyric = lyricsDiv.previousSibling; prevLyric.style.color = "#999"; } break; } } }); ``` 在这个示例中，歌词数组中包含了多个对象，每个对象包含了一个时间戳和一行歌词。通过监听 `<audio>` 标签的 `timeupdate` 事件，获取当前播放时间，然后遍历歌词数组，找到当前应该显示的歌词，并将其显示在页面中。同时，将前一行歌词的颜色设置为灰色，当前行歌词的颜色设置为黑色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值