首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript 解析 lrc 歌词

最近打算做播放器,研究了下解析lrc歌词的算法,百度基本没有现成的,所以自己各种搜索各种折腾然后写了个~~~特分享给大家 我们看到的lrc歌词一般都是这样的: [ti:听妈妈的话] [ar:周杰伦] [...,至于那些歌曲信息这些我就忽略了 大概思路是: 按行把歌词拆成数组 遍历这个数组,将每一行的歌词和时间标签一道转换为数组 遍历数组的每一次循环要干的事情: 用正则匹配出这行的时间标签和对应的歌词 以时间标签为单位...var _lrc = lyric[i].replace(/[d{2}:d{2}((.|:)d{2})]/g,""); //过滤掉空行等非歌词正文部分...lrc.push([_t,_lrc]); } } } //重新按时间排序...lrc.sort(function(a,b){ return a[0]-b[0]; }); return lrc;

1.9K21
您找到你想要的搜索结果了吗?
是的
没有找到

歌词显示控件的实现(上)——歌词解析

而今天将要分享的是上篇,主要讲解关于*.lrc文件解析。 我们本文的目的是将lrc格式的歌词文件进行解析,并能将其展示到界面。 先看下效果: ?...ok,开始切入正题 01 — 了解歌词文件结构 写过音乐播放器的朋友可能都了解过歌词文件的规范格式,既然是歌词显示的控件,就必然需要清楚地了解歌词文件的组成规范,才能准确无误的解析歌词文件,得到我们想要的信息...那我们先看一个最普通的歌词文件: ? 所有歌词文件——*.lrc文件 都是以一个标准来进行制作的(如上)。...了解清楚歌词文件结构,我们就能对症下药: 02 — 开始解析 既然了解了歌词文件的组成部分,那么解析歌词文件也就不难,就是简单的文件内容读取: 1、首先获取*.lrc歌词文件的二进制流InputStream...03 — 解析验证 这里为了方便,我将歌词文件放在了assets下 ?

1.9K20

Qt学习之路_14(简易音乐播放器)

程序中并没有直接使用meidaObject对象来获取音频文件信息,而是创建了新的MedioObject类对象meta_information_resolver作为元数据的解析器。...歌词解析都在resolve_lrc()函数中实现的,利用正则表达式来获取歌曲文件中的各种信息,一般的歌词文件以.lrc后缀结尾,歌词文件的格式如下所示:  ?   ...关于歌词解析部分详见代码部分。 系统图标的设计:   一般的音乐播放器都会有一个系统托盘图标,这样就可以在播放歌曲的时候将主界面最小化到系统托盘图标了。...(3)) + "lrc";//把音频文件的后缀改成lrc后缀 // 打开歌词文件 QFile file(lrc_file_name); if (!...(" --- 歌词文件内容错误!"))

2K30

Qt学习之路_14(简易音乐播放器)

程序中并没有直接使用meidaObject对象来获取音频文件信息,而是创建了新的MedioObject类对象meta_information_resolver作为元数据的解析器。...歌词解析都在resolve_lrc()函数中实现的,利用正则表达式来获取歌曲文件中的各种信息,一般的歌词文件以.lrc后缀结尾,歌词文件的格式如下所示:  ?   ...关于歌词解析部分详见代码部分。 系统图标的设计:   一般的音乐播放器都会有一个系统托盘图标,这样就可以在播放歌曲的时候将主界面最小化到系统托盘图标了。...(3)) + "lrc";//把音频文件的后缀改成lrc后缀 // 打开歌词文件 QFile file(lrc_file_name); if (!...(" --- 歌词文件内容错误!"))

4.4K20

Python点阵字玩转动态歌词

想法来自于听歌时桌面动态歌词,我们的点阵字既然可以自定义输入识别,何不读取歌词文件随着歌曲播放动态显示呢? 下面介绍设计思路,歌词动态播放效果见文末视频,截图如下 ?...歌词lrc文件 玩过mp3的话对此应该不陌生,就是配在歌曲mp3文件边上后缀为lrc文件lrc是英文lyric即歌词的缩写。...搞清lrc的格式,思路也就清晰了:读取文件中的时间标签,解析出我们需要的时间和对应的歌词文本,定时按文本内容打印输出点阵字。...文件都放在和py文件同一个文件夹,如果改变路径,则需要在代码中lrc和mp3读取处添加对应路径。...最终成果视频 https://v.qq.com/x/page/n13574d2raf.html 代码下载 后台回复 动态歌词 获取下载链接 后续问题 目前lrc文件较难找,这个我再研究下网易云音乐的歌词文件

1.1K20

Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)

具体谈谈这个功能的实现 歌词解析,我之前做的==乐诗博客==采用的是自己写的一种歌词解析滚动播放的方法 首先明白一般歌词的形式是: 00:13.80期望飞上恬静月球遥望每家的窗 00:18.24谁伴深爱细味露台玫瑰香...这样子的形式,利用 ajax 异步请求到歌词文件内容,然后就可以进行字符串裁剪,单单取出时间和歌词,html5 播放器可以获取到当前播放时间,就可以实现==当前播放时间==和==当前歌词==一一对应,...vallrc || $(".is_deleteLrc").text() == 1){ $(".lrc_content_notext").text("暂无歌词"); $(".lrc_content_notext...,使当前歌词在中间 },240); }); }, 这种==歌词解析==、==联动播放==的实现是我之前==乐诗博客==采用的一种方案,感觉也不错 重点来了 此次采用的是另一种歌词解析方式,利用...//解析歌词 function parseLyric(lrc) { var lyrics = lrc.split("\n"); var lrcText = {}; for(var i=0;i<lyrics.length

5.3K70

自制 h5 音乐播放器 可搜索

,我之前做的乐诗博客采用自己写的一种歌词解析滚动播放的方法: 首先明白一般歌词的形式是:[00:13.80]期望飞上恬静月球遥望每家的窗 [00:18.24]谁伴深爱细味露台玫瑰香 这样子的形式,利用...ajax 异步请求到歌词文件,然后就可以进行字符串裁剪,单单取出时间和歌词,一一对应 1 loadLrc:function(){//加载歌词 2 var vallrc = $...$(".lrc_content_notext").show(); 7 return; 8 } 9 var isHrefLrc = $(".is_href_lrc...},240); 89 }); 90 }, 这种歌词解析、联动播放的进度进行滚动是我之前乐诗博客采用的一种方案,感觉也不错 此次采用另一种解析方式,利用...: 1 //解析歌词 2 function parseLyric(lrc) { 3 var lyrics = lrc.split("\n"); 4 var lrcText = {

4.2K40

【教程】纯前端做一个歌词显示的音乐播放器

节目:08-1202L/08-1203K:【教程】纯前端做一个歌词显示的音乐播放器 [效果] 用到的文件: Bootstrap 4.6.0 CSS:https://cdn.bootcdn.net/ajax.../libs/twitter-bootstrap/4.6.0/css/bootstrap.css 一段音乐及这首歌的lrc歌词(只要带时间的都可以,这里用lrc举例) 浏览器 jquery(可选,为了查找元素更方便...] 最好留两个单元格计算 分钟单元格输入函数:=LEFT(C2,2);C2是你的LRC时间所在单元格,下同 秒数单元格输入函数:=RIGHT(C2,5) 这样分秒就分离了 然后将分钟+秒变成js能读取的时间...遍历数组可以这样来: for(i1=0;i1<lrcjson.length;i1++) { //每句歌词时间:lrcjson[i1].time //每句歌词:lrcjson[i1].lrc ] 判断音频与对应歌词...,所以直接可以对歌词操作: lrc.innerHTML=lrcjson[i1].lrc; 总代码 Javascript lrcjson = {"time":261.96,"lrc":"ごめんね 好きなの

5.2K62

Winform零基础入门教程-实现音乐播放器的歌词显示功能

上一课链接:Winform零基础入门教程-开发美女音乐播放器软件 程序员 歌词显示分析 如果想要进行歌词显示,则需要后缀名为lrc歌词文件。通过读取歌词文件进行显示。...下面我打开酷我音乐播放器的歌词文件。发现了我听过的歌曲lrc歌词文件。 ? 酷我音乐盒歌词文件 显示文件后缀名 当然如果你的文件目录没有显示后缀名,如图: ?...设置文件后缀名显示2 歌词显示 歌词显示我们就实现读取,当对应的时间的时候显示歌词就够了。下面看下lrc歌词文件的内容是什么(文本编辑器打开)? ?...lrc歌词文件内容 不难发现除第一行和第二行之外,是以一个时间和歌词的形式保存的。所以,对于歌词显示,我们只需要不断的去判断当前歌曲播放的进度,并且按照时间显示歌词就好了。...显示歌词 今天很少,算是对播放器的一点完善。接下来将要讲解Socket网络编程的知识,带你实现一个C#版本的局域网聊天小软件。 END.

1.5K40

​基于H5的音频播放器开发(2):前后端篇

本文涉及以下要点: 后端增删改查流程实现 上传解压逻辑及错误处理 前后端解析歌词文件 Audios数据模型 通过上一票文章,可以知道,作为单个的音乐数据,必须要拥有以下特性: 标题(title) 演唱者...(singer) 链接(resource_url) 封面图(cover_url) 歌词lrc) 顶(like)/踩(dislike) 在model层新建一个Audio model: // /mongodb...于是衍生出以下业务逻辑: 上传一个zip包 标准的zip包包括:歌词(.lrc)/歌曲(.mp3/ogg/…)/封面图(img) 后端执行解压到指定文件夹 对以上三者分别进行校验,歌曲和封面返回链接地址...,歌词返回解析后到文档内容 歌曲名作为title, 首先先把管理界面写好吧!...歌词 网上有个人开发者写的前端lrc解析插件,看了下api都感觉不舒服。索性自己实现一个。 一般标准的lyric文件是由[时间]内容的tag标签组成,如下图: ?

1.9K20

iOS音频播放器锁屏歌词显示与性能优化 原

iOS音频播放器锁屏歌词显示与性能优化 一、引言     前边有博客探讨了有关iOS开发中音频播放的技术与进行后台音频播放并在后台与用户进行交互的方法,本篇将探讨一种在锁屏界面同步显示歌词歌词的方法,...然而,对于MPNowPlayingInfoCenter中可以由开发者掌握的接口十分有限,若要在锁屏界面同步的显示歌曲歌词,一个比较简单的方法是不停的将当前歌词与封面进行图片合成,之后刷新锁屏界面的图片。...下面代码是根据解析好的LRC歌词数据进行图片合成的示例代码: //这个方法通过传入的LRC歌词数据进行图片的合成 array参数为每行lrc歌词数据集合 index为当前需要播放的lrc歌词行数 -(void...)setCurretLRCArray:(NSArray *)array index:(int)index{     //LRCItem是歌词模型 里面的lrc方法获取歌词文字字符串     NSString... * lineLRC = [(LRCItem *)array[index] lrc];     //提高性能 进行判断 当前显示的歌词有无变化 如果没变化 不进行后续操作     if ([_lrcLabel.text

1.1K20

hexo-tag-aplayer使用方法

> 1.8.0 Meting.js > 1.1.1 使用 {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc...autoplay: (可选) 自动播放,移动端浏览器暂时不支持此功能 width:xxx: (可选) 播放器宽度 (默认: 100%) lrc:xxx: (可选)歌词文件 URL 地址 当开启 Hexo...的 文章资源文件夹 功能时,可以将图片、音乐文件歌词文件放入与文章对应的资源文件夹中,然后直接引用: {% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3..." "picture.jpg" "lrc:caffeine.txt" %} 歌词标签 除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中: {%...hexo-renderer-jade after_render:html 似乎在 Hexo 服务器模式默认配置中无法被调用 (hexo server), 遇到这种情况用户可能需要使用 hexo-server 的静态文件解析模式

1.9K51

【一起学Python】爬取网易云歌词

作为新手,我很本能就打开页面复制了url,然后用Beautifulsoup解析了网页并打印出来,然后去查找歌词所在的标签,心想这不是so easy吗!...(json_obj) lrc = j['lrc']['lyric'] pat = re.compile(r'\[.*\]') lrc = re.sub(pat, "", lrc) lrc = lrc.strip...() print(lrc) 由于本人对歌神的崇拜犹如滔滔江水之连绵不绝,几乎他的每一首歌都很喜欢,所以我想多下几首歌的歌词,热心的吃瓜群众可能会这样提醒我换一首歌,把URL复制进去替换一下不就OK了吗,...我们可以定义一个这样的函数根据歌曲的ID去自动下载歌曲的歌词,我们想要下载哪首歌曲的歌词需要输入歌曲的ID就可以了!...50_lyric=get_lyric_by_music_id(i) f=open("F:/projects/scrapy/%s.txt" % singer_name,"ab")#单个文件存储一个歌手的

1.3K111
领券