首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript 解析 lrc 歌词

JavaScript 解析 lrc 歌词

作者头像
zgq354
发布于 2019-11-22 13:29:00
发布于 2019-11-22 13:29:00
2.1K00
代码可运行
举报
文章被收录于专栏:0x00010x0001
运行总次数:0
代码可运行

最近打算做播放器,研究了下解析lrc歌词的算法,百度基本没有现成的,所以自己各种搜索各种折腾然后写了个~~~特分享给大家

我们看到的lrc歌词一般都是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[ti:听妈妈的话]
[ar:周杰伦]
[al:]
[by:] 
04:20.3103:36.6502:13.3501:30.4300:31.01[00:00.00]  
[00:03.00]听妈妈的话 - 周杰伦  
[00:06.00]词:周杰伦 曲:周杰伦  
[00:10.33]小朋友 你是否有很多问号  
[00:12.70]为什麼 别人在那看漫画  
[00:15.25]我却在学画画 对着钢琴说话  
[00:17.84]别人在玩游戏 我却靠在墙壁背我的ABC  
[00:21.00]我说我要一台大大的飞机  
[00:23.59]但却得到一台旧旧录音机  
[00:26.31]为什麼要听妈妈的话  
[00:28.24]长大后你就会开始懂了这段话  
03:16.67长大后我开始明白  
03:18.65为什么我跑得比别人快  
03:20.49飞得比别人高  
03:21.45将来大家看的都是我画的漫画  
03:24.00大家唱的都是我写的歌  
03:26.91妈妈的辛苦不让你看见  
03:29.46温暖的食谱在她心里面  
03:32.07有空就多多握握她的手  
03:34.65把手牵着一起梦游  
03:37.0402:14.35听妈妈的话 别让她受伤  
03:47.5102:24.62想快快长大 才能保护她  
02:34.99美丽的白发 幸福中发芽  
04:08.20[01:22.71]天使的魔法 温暖中慈祥  
[01:32.43]在你的未来 音乐是你的王牌  
[01:34.95]拿王牌谈个恋爱 唉!我不想把你教坏  
[01:37.98]还是听妈妈的话吧 晚点再恋爱吧  
[01:40.83]我知道你未来的路 当妈比我更清楚  
[01:43.76]你会开始学其他同学在书包写东写西  
[01:46.28]但我建议你最好写妈妈我会用功读书  
[01:48.79]用功读书 怎么会从我嘴巴说出  
[01:51.46]不想你输 所以要叫你用功读书  
[01:53.48]妈妈织给你的毛衣 你要好好的收着  
[01:55.99]因为母亲节到时我要告诉她我还留着  
[01:58.57]对了 我会遇到周润发  
[02:00.45]所以你可以跟同学炫耀赌神未来是你爸爸  
[02:03.63]我找不到童年写的情书  
[02:05.55]你写完不要送人  
[02:06.91]因为过两天你会在操场上捡到  
[02:09.18]你会开始喜欢上流行歌  
[02:11.35]因为张学友开始准备唱吻别  
[03:58.07]美丽的白发 幸福总发芽 

可以看到,歌词是由时间标签和歌词本身构成的,至于那些歌曲信息这些我就忽略了

大概思路是:

  1. 按行把歌词拆成数组
  2. 遍历这个数组,将每一行的歌词和时间标签一道转换为数组

遍历数组的每一次循环要干的事情:

  1. 用正则匹配出这行的时间标签和对应的歌词
  2. 以时间标签为单位,将标签转换为以秒为单位的时间再与该行对应的歌词一同push入数组
  3. 由于多时间标签的存在顺序会打乱,所以我们最后还要将保存歌词和时间的数组按时间从小到大排序

js代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function parseLyric(text) {
        //先按行分割
        var lyric = text.split('n'); 
        //新建一个数组存放最后结果
        lrc = new Array(); 
        var _l = lyric.length;
        for(i=0;i<_l;i++) {
            //正则匹配播放时间返回一个数组
            var sj = lyric[i].match(/[d{2}:d{2}((.|:)d{2})]/g);
            //获得该行歌词正文 
            var _lrc = lyric[i].replace(/[d{2}:d{2}((.|:)d{2})]/g,"");
            //过滤掉空行等非歌词正文部分
            if(sj != null) { 
                //可能有多个时间标签对应一句歌词的情况,用一个循环解决
                var _ll = sj.length;
                for(j=0;j<_ll;j++){
                    var _s=sj[j];
                    var min = Number(String(_s.match(/[d{2}/i)).slice(1));
                    var sec = parseFloat(String(_s.match(/d{2}.d{2}/i)));
                    //换算时间,保留两位小数
                    var _t = Math.round((min  60 + sec)100)/100;
                    //把时间和对应的歌词保存到数组
                    lrc.push([_t,_lrc]);
                }
            }
        }
        //重新按时间排序
        lrc.sort(function(a,b){
            return a[0]-b[0];    
        });
        return lrc;
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
我们的青春,全在周董17年的歌词里了
每当提到周杰伦的歌时,你首先会想到的是什么呢?双截棍?中国风?还是方文山?或者更会有人回答说:根本听不清的歌词……
DT数据侠
2018/08/08
6400
我们的青春,全在周董17年的歌词里了
Flash/Flex学习笔记(32):播放音乐并同步显示lyc歌词(适用于Silverlight)
题外话:个别朋友总是问我同样的问题,做为一名c#/silverlight程序员为啥还要学flash ? 回 答:看日本片时,就不能对照看欧美的么? 不体会日本的细腻,又怎能感觉到欧美的粗放;同样都是w
菩提树下的杨过
2018/01/23
8390
民谣歌词基本格式_歌词创作
解析后的歌词位于oLRC对象的ms数组中: oLRC.ms[i].t 是第i行歌词的时间,以秒计; oLRC.ms[i].c 是第i行歌词。
全栈程序员站长
2022/11/01
7890
【字节前端青训营】跟着月影学JavaScript——前端代码优化三大原则之各司其职,夜间模式小案例
我们都知道前端基础三大件,HTML、CSS、JavaScript,HTML是页面的骨架,CSS是页面的皮肤,JavaScript就是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分,尽可能的少用JS干扰CSS/HTML,能让他们内部自己搞定的就不要借助JavaScript来满足需求。下面我们来看几个小例子。
henu_Newxc03
2022/05/05
4440
【字节前端青训营】跟着月影学JavaScript——前端代码优化三大原则之各司其职,夜间模式小案例
100行代码 | 歌词解析器
文件后缀一般为.lrc。而歌词内容分为以下两种格式:(1) 「标识标签」,其格式为[标识名:值],如:
Qt君
2020/05/13
1.6K0
scrapy遇上ajax,抓取QQ音乐周杰伦专辑与歌词
zone同学最近在上线小程序好久没写文章了,他说早就手痒痒了,所以挤出时间写了这篇,这是下面这五篇文章的连载文章:
小小詹同学
2019/11/12
6650
分析周杰伦75775字歌词后,我们用他最爱的词重写了《说好不哭》
有人觉得,听着这首歌,仿佛自己的青春岁月回来了,说好不哭,可还是哭了下来,那个周杰伦又回来了!
IT阅读排行榜
2019/10/15
7670
分析周杰伦75775字歌词后,我们用他最爱的词重写了《说好不哭》
做一个简易简单音乐播放器
那天夜里,我戴上耳机准备听首老歌,却猛然发现自己手机里找不到一个既好看又好用的小型音乐播放器 App。主流播放器不是太臃肿,就是界面审美老旧。突然就冒出一个念头——干脆自己写一个简约现代、功能完善的小型音乐播放器吧。
繁依Fanyi
2025/05/14
2690
haslib 模块
一、模块简介 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等。 什么是摘要算法呢?摘要算法又称哈希算法、散列算法。它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制的字符串表示)。 摘要算法就是通过摘要函数f()对任意长度的数据data计算出固定长度的摘要digest,目的是为了发现原始数据是否被人篡改过。 摘要算法之所以能指出数据是否被篡改过,就是因为摘要函数是一个单向函数,计算f(data)很容易,但通过digest反推data却非常困难。而且,对原始数
人生不如戏
2018/04/12
5410
js+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
由于编辑器限制,请移步钻芒博客查看:https://www.zuanmang.net/4787.html
AlexTao
2019/09/05
2.7K0
js+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
Flutter实战 | 从 0 搭建「网易云音乐」APP(六、歌词(一))
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来。
Flutter笔记
2019/11/01
2.7K0
Flutter实战 | 从 0 搭建「网易云音乐」APP(六、歌词(一))
Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)
这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表、可关键词搜索、歌词滚动播放的效果,于是乎,就做了这一个 Lily_music
Krry
2018/10/28
5.7K4
Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)
80 - 抓取豆瓣音乐排行榜
使用自己熟悉的网络库和分析库,实现抓取豆瓣音乐Top250排行榜的数据,并将数据保存在csv文件中 更多爬虫教学及案例可查看我 “Python爬虫” 专栏 ''' https://music.doub
ruochen
2021/06/14
1.2K0
80 - 抓取豆瓣音乐排行榜
使用js,html,css实现歌词滚动的效果
到此就结束了, 主要难点在于计算ul的偏移量, 和 最大偏移量, 以及边界情况考虑. 不过,只要画好图,一分析,便会清晰明了许多.
心安事随
2024/07/29
8580
使用js,html,css实现歌词滚动的效果
自制 h5 音乐播放器 可搜索
有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,还这么多课,实则匆忙
Krry
2018/09/10
4.4K0
自制 h5 音乐播放器 可搜索
【致敬周杰伦】基于TensorFlow让机器生成周董的歌词(附源码)
周杰伦 深深地 影响了我们 一代人 这句话 不足为过 前言 今日推文将介绍如何使用TensorFlow一步步来搭建一个序列建模的应用——机器创作歌词,训练样本是周杰伦出道以来的所有歌曲的歌词,文末生成
量化投资与机器学习微信公众号
2018/01/29
4K0
【致敬周杰伦】基于TensorFlow让机器生成周董的歌词(附源码)
【教程】纯前端做一个歌词显示的音乐播放器
节目:08-1202L/08-1203K:【教程】纯前端做一个歌词显示的音乐播放器
Ar-Sr-Na
2021/05/20
6K0
【教程】纯前端做一个歌词显示的音乐播放器
前端|如何制作音乐播放器
在框架下方插入音乐播放器audio,其中,src表示音频的地址,音频后面则显示当浏览器不支持audio时显示的内容。
算法与编程之美
2020/08/21
2.4K0
前端|如何制作音乐播放器
网络基础 Modbus协议学习总结
Modbus协议,首先从字面理解它包括Mod和Bus两部分,首先它是一种bus,即总线协议,总线就意味着有主机,有从机,这些设备在同一条总线上。
授客
2024/11/21
6340
网络基础 Modbus协议学习总结
弹、弹幕,是怎样练成的?
说起弹幕看过视频的都不会陌生,那满屏充满着飘逸评论的效果,让人如痴如醉,无法自拔。
苏南
2020/12/16
9510
弹、弹幕,是怎样练成的?
推荐阅读
相关推荐
我们的青春,全在周董17年的歌词里了
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验