如何用js完美的解析lrc歌词
2015-12-18 23:04
886 查看
要想解析lrc,就得先知道lrc是什么,lrc是英文lyric(歌词)的缩写,基于纯文本的歌词专用格式,被用做歌词文件的扩展名。以lrc为扩展名的歌词文件可以在各类数码播放器中同步显示,最早是由郭祥祥先生(Djohan)提出并在其程序中得到应用。目前市场上的支持显示歌词的音乐播放器都有相同的规定,要求歌曲和LRC歌词的文件名相同,即:唐磊
- 丁香花.mp3,唐磊 - 丁香花.lrc。
除了lrc格式外,还有qrc(QQ音乐)、krc(酷狗)等,与lrc不同的是 它们的准确性 要 更强。lrc只能精确到每句歌词,而qrc 和 krc 能 精确到每一个字。(可以扩展lrc的 功能 使他精确到每一个字,以后再说)
lrc歌词文本中含有两类标签:
一是标识标签,其格式为“[标识名:值]”主要包含以下预定义的标签:
[ar:艺人名]
[ti:曲名]
[al:专辑名]
[by:编者(指编辑LRC歌词的人)]
[offset:时间补偿值] 其单位是毫秒,正值表示整体提前,负值相反。这是用于总体调整显示快慢的。当用户听歌时,发现歌词快了几秒,可以调整歌词,最后此值被保存在 offset,下次播放时,将自动匹配正确时间。
二是时间标签,形式为“[mm:ss]”或“[mm:ss.ff]”(分钟数:秒数.毫秒数),时间标签需位于某行歌词中的句首部分,一行歌词可以包含多个时间标签(比如歌词中的迭句部分)。当歌曲播放到达某一时间点时,MP3就会寻找对应的时间标签并显示标签后面的歌词文本,这样就完成了“歌词同步”的功能。如以下歌词:
[ti:有谁能够一夜之间长大]
[ar:戊道子]
[al:有谁能够一夜之间长大]
[by:珍妮]
匹配时间为: 04 分 44 秒 的歌曲
[00:00]我爱歌词网 [www.5ilrc.com]
[00:00.90]有谁能够一夜之间长大 - 戊道子
[00:07.10]词:[盘子]
[00:10.99]曲:[陈绍楠]
[00:13.11]编曲:[SEVEN]
[00:16.76][00:17]
[00:35.44][02:09]走去忘记 旧的人旧的自己
[00:42.60][02:16.16]远离回忆 找个人说我爱你
[00:49.79][02:23.22]别带着沉重去飞行
[00:53.31][02:26.68]别怀疑内心深处的勇气
[00:56.88][02:30.34]放纵地拥抱晨曦
[01:00.16][02:33.61]在路上遇见新的自己
[01:06.52][03:11.60]有谁能够一夜之间长大
[01:13.65][03:18.93]爱情碾过还能喘气就不算差
[01:20.73][03:25.99]何必羡慕那不凋败的塑料花
[01:27.66][03:32.96]没有花期不会枯萎 难道美吗
[01:34.76][03:40]尽情亲吻爱情留下的疤
[01:41.66][03:46.96]童话也不只是有水晶鞋和白马
[01:49.01][03:54.40]何必为了一段插曲哭到沙哑
[01:55.91][04:01.08]过程不留遗憾结果也就伟大
[04:13.18]Lrc By:珍妮 QQ:929964514
lrc的写法比较自由,上诉也可写成:
匹配时间为: 04 分 44 秒 的歌曲
[00:00]我爱歌词网 [www.5ilrc.com]
[00:00.9]有谁能够一夜之间长大 - 戊道子
[00:07.1]词:[盘子]
[00:10.99]曲:[陈绍楠]
[00:13.11]编曲:[SEVEN]
[00:16.76]
[00:17]
这是一句废话,解析lrc的时候要过滤
[00:35.44][2:9]走去忘记 旧的人旧的自己[00:42.60][02:16.16]远离回忆 找个人说我爱你
[00:49.79][2:23.22]别带着沉重去飞行[00:53.31][02:26.68]别怀疑内心深处的勇气
[00:56.88][2:30.34]放纵地拥抱晨曦
[1:00.16][2:33.61]在路上遇见新的自己
[ar:戊道子]
[al:有谁能够一夜之间长大][by:珍妮]
[1:6.52][3:11.60]有谁能够一夜之间长大[01:13.65][03:18.93]爱情碾过还能喘气就不算差
[1:20.73][3:25.99]何必羡慕那不凋败的塑料花[01:27.66][03:32.96]没有花期不会枯萎 难道美吗
[01:34.76][03:40]尽情亲吻爱情留下的疤[01:41.66][03:46.96]童话也不只是有水晶鞋和白马
[ti:有谁能够一夜之间长大]
[01:49.01][03:54.40]何必为了一段插曲哭到沙哑[01:55.91][04:01.08]过程不留遗憾结果也就伟大
[04:13.18]Lrc By:珍妮 QQ:929964514
可以看到,预定义标签被打散放进了歌词标签中间,[00:16.76] [00:17]
标签没有歌词,(你们肯定要说[00:17]标签下面不是有句废话么,但是他们中间隔了一个换行符,换行符表示结束,所以说下面那句是废话,解析lrc的时候要过滤掉)没有歌词的时间标签属于无意义的标签,也要去掉。在歌词开头也有一句废话,也要过滤掉。
[01:06:52]被写成了[1:6.52],[02:09]写成了[2:9],写法多种多样,解析lrc歌词的时候一定要注意。
下面直接贴代码(本程序能真正做到完美的解析lrc,并扩展lrc):
先新建一个html文件,记得引jquery
在新建一个css文件:
最后加入以下js,运行便能看见效果:
发现上面有正则表达的地方 显示出问题了,大家直接下源码吧,源码上有注释。
源码下载地址:http://pan.baidu.com/s/1eRrKwHs
本文属原创,转载请注明。
另外,求一份 web前端的工作(成都),QQ:2190460780。
- 丁香花.mp3,唐磊 - 丁香花.lrc。
除了lrc格式外,还有qrc(QQ音乐)、krc(酷狗)等,与lrc不同的是 它们的准确性 要 更强。lrc只能精确到每句歌词,而qrc 和 krc 能 精确到每一个字。(可以扩展lrc的 功能 使他精确到每一个字,以后再说)
lrc歌词文本中含有两类标签:
一是标识标签,其格式为“[标识名:值]”主要包含以下预定义的标签:
[ar:艺人名]
[ti:曲名]
[al:专辑名]
[by:编者(指编辑LRC歌词的人)]
[offset:时间补偿值] 其单位是毫秒,正值表示整体提前,负值相反。这是用于总体调整显示快慢的。当用户听歌时,发现歌词快了几秒,可以调整歌词,最后此值被保存在 offset,下次播放时,将自动匹配正确时间。
二是时间标签,形式为“[mm:ss]”或“[mm:ss.ff]”(分钟数:秒数.毫秒数),时间标签需位于某行歌词中的句首部分,一行歌词可以包含多个时间标签(比如歌词中的迭句部分)。当歌曲播放到达某一时间点时,MP3就会寻找对应的时间标签并显示标签后面的歌词文本,这样就完成了“歌词同步”的功能。如以下歌词:
[ti:有谁能够一夜之间长大]
[ar:戊道子]
[al:有谁能够一夜之间长大]
[by:珍妮]
匹配时间为: 04 分 44 秒 的歌曲
[00:00]我爱歌词网 [www.5ilrc.com]
[00:00.90]有谁能够一夜之间长大 - 戊道子
[00:07.10]词:[盘子]
[00:10.99]曲:[陈绍楠]
[00:13.11]编曲:[SEVEN]
[00:16.76][00:17]
[00:35.44][02:09]走去忘记 旧的人旧的自己
[00:42.60][02:16.16]远离回忆 找个人说我爱你
[00:49.79][02:23.22]别带着沉重去飞行
[00:53.31][02:26.68]别怀疑内心深处的勇气
[00:56.88][02:30.34]放纵地拥抱晨曦
[01:00.16][02:33.61]在路上遇见新的自己
[01:06.52][03:11.60]有谁能够一夜之间长大
[01:13.65][03:18.93]爱情碾过还能喘气就不算差
[01:20.73][03:25.99]何必羡慕那不凋败的塑料花
[01:27.66][03:32.96]没有花期不会枯萎 难道美吗
[01:34.76][03:40]尽情亲吻爱情留下的疤
[01:41.66][03:46.96]童话也不只是有水晶鞋和白马
[01:49.01][03:54.40]何必为了一段插曲哭到沙哑
[01:55.91][04:01.08]过程不留遗憾结果也就伟大
[04:13.18]Lrc By:珍妮 QQ:929964514
lrc的写法比较自由,上诉也可写成:
匹配时间为: 04 分 44 秒 的歌曲
[00:00]我爱歌词网 [www.5ilrc.com]
[00:00.9]有谁能够一夜之间长大 - 戊道子
[00:07.1]词:[盘子]
[00:10.99]曲:[陈绍楠]
[00:13.11]编曲:[SEVEN]
[00:16.76]
[00:17]
这是一句废话,解析lrc的时候要过滤
[00:35.44][2:9]走去忘记 旧的人旧的自己[00:42.60][02:16.16]远离回忆 找个人说我爱你
[00:49.79][2:23.22]别带着沉重去飞行[00:53.31][02:26.68]别怀疑内心深处的勇气
[00:56.88][2:30.34]放纵地拥抱晨曦
[1:00.16][2:33.61]在路上遇见新的自己
[ar:戊道子]
[al:有谁能够一夜之间长大][by:珍妮]
[1:6.52][3:11.60]有谁能够一夜之间长大[01:13.65][03:18.93]爱情碾过还能喘气就不算差
[1:20.73][3:25.99]何必羡慕那不凋败的塑料花[01:27.66][03:32.96]没有花期不会枯萎 难道美吗
[01:34.76][03:40]尽情亲吻爱情留下的疤[01:41.66][03:46.96]童话也不只是有水晶鞋和白马
[ti:有谁能够一夜之间长大]
[01:49.01][03:54.40]何必为了一段插曲哭到沙哑[01:55.91][04:01.08]过程不留遗憾结果也就伟大
[04:13.18]Lrc By:珍妮 QQ:929964514
可以看到,预定义标签被打散放进了歌词标签中间,[00:16.76] [00:17]
标签没有歌词,(你们肯定要说[00:17]标签下面不是有句废话么,但是他们中间隔了一个换行符,换行符表示结束,所以说下面那句是废话,解析lrc的时候要过滤掉)没有歌词的时间标签属于无意义的标签,也要去掉。在歌词开头也有一句废话,也要过滤掉。
[01:06:52]被写成了[1:6.52],[02:09]写成了[2:9],写法多种多样,解析lrc歌词的时候一定要注意。
下面直接贴代码(本程序能真正做到完美的解析lrc,并扩展lrc):
先新建一个html文件,记得引jquery
<div class="lyricPanel"></div>
在新建一个css文件:
.lyricPanel { width:250px; height:400px; border:1px solid red; overflow-y:scroll; }
最后加入以下js,运行便能看见效果:
var s = "[ti:有谁能够一夜之间长大]" + "[al:有谁能够一夜之间长大]" + "匹配时间为: 04 分 44 秒 的歌曲" + "[00:00]我爱歌词网 [www.5ilrc.com]"+ "[00:00.90]有谁能够一夜之间长大 - 戊道子"+ "[00:07.10]词:[盘子]"+ "[00:10.99]曲:[陈绍楠]"+ "[00:13.11]编曲:[SEVEN]"+ "[00:17]"+"\n"+ "[00:35.44][02:09]走去忘记 旧的人旧的自己"+ "[00:42.60][02:16.16]远离回忆 找个人说我爱你"+ "[ar:戊道子]" + "[00:49.79][02:23.22]别带着沉重去飞行"+ "[00:53.31][02:26.68]别怀疑内心深处的勇气"+ "[00:56.88][02:30.34]放纵地拥抱晨曦"+ "[by:珍妮]" + "[01:00.16][02:33.61]在路上遇见新的自己"+ "[01:06.52][03:11.60]有谁能够一夜之间长大"+ "[01:13.65][03:18.93]爱情碾过还能喘气就不算差"+ "[01:20.73][03:25.99]何必羡慕那不凋败的塑料花"+ "[01:27.66][03:32.96]没有花期不会枯萎 难道美吗"+ "[01:34.76][03:40]尽情亲吻爱情留下的疤"+ "[01:41.66][03:46.96]童话也不只是有水晶鞋和白马"+ "[01:49.01][03:54.40]何必为了一段插曲哭到沙哑"+ "[01:55.91][04:01.08]过程不留遗憾结果也就伟大"+ "[04:13.18]Lrc By:珍妮 QQ:929964514"; if(typeof binlyric != 'object') {binlyric = {};} binlyric = { edition:"1.1", obj:"", lyricCSS:new Object(), txt:"", index:0, time:new Array(), lyric:new Array(), sort:function(){ // 冒泡排序(从小到大) var third; for(var j=0;j<this.index-1;j++) { for(var i=0;i<this.index-1;i++) { if(this.time[i]>this.time[i+1]) { third = this.time[i]; this.time[i] = this.time[i+1]; this.time[i+1] = third; third = this.lyric[i]; this.lyric[i] = this.lyric[i+1]; this.lyric[i+1] = third; } } } }, createPanel:function(){ // 创建歌词面板 var i=0; $(this.obj).html(""); for(i=0;i<this.index;i++) { $(this.obj).append("<div>"+this.lyric[i]+"</div>"); } for(i in this.lyricCSS) { $(this.obj).find("div").css(this.lyricCSS,this.lyricCSS[i]); } }, findTags:function(index,strArray,number){ // 查找标签(包括任何扩展的标签) // 此方法能匹配所有格式的标签 // 因为此方法是在后面写的,所以时间标签并没有使用此方法 number = number || this.txt.length; number = (number>this.txt.length) ? this.txt.length:number; var i,j,complete=0,value; var obj = new Object(); obj.booble = false; obj.value = "["; for(i=index;i<number;i++) { if(this.txt.substr(i,1)==strArray[complete].s) { complete+=1; if(complete>1) { if(complete<strArray.length) { obj.value += '{value:"'+this.txt.substr(value+1,i-value-1)+'"},'; } else { obj.value += '{value:"'+this.txt.substr(value+1,i-value-1)+'"}]'; } } if(complete==strArray.length) { obj.txt = this.txt.substr(index,i-index+1); obj.value = eval('('+obj.value+')'); obj.index = i+1; obj.booble = true; break } value = i; } else if(this.txt.substr(i,1)=="\n") { obj.booble = false; return obj; } else if(this.txt.substr(i,1)==strArray[0].s && complete>0) // 遇到2次开始标志就退出 { obj.booble = false; return obj; } } return obj; }, findlyric:function(index){ // 查找歌词: 有则返回 歌词、继续查找的位置, 否则只返回继续查找的位置 var obj = {}; var str = this.txt; var i; for(i=index;i<str.length;i++) { if(str.charAt(i)=="[") { var _obj = this.findTags(i,[{s:"["},{s:":"},{s:"]"}]); if(_obj.booble) { obj.index = i;//i + _obj.txt.length; obj.lyric = str.substr(index,i-index); return obj; } } else if(str.charAt(i)=="\n") { obj.index = i+1; obj.lyric = str.substr(index,i-index); return obj } } if(i==str.length) // 专处理最后一句歌词(最后一句歌词比较特殊) { obj.index = i+1; obj.lyric = str.substr(index,i-index); return obj; } obj.index = i; return obj; }, findTime:function(index){ // 查找时间 : 有则返回 时间、继续查找的位置, 否则只返回继续查找的位置 // 此功能可以用 findTags 方法实现,更简单、更强大、代码更少 // findTags方法 是在后面写的,所以这里就不改了,具体可参考 findID方法里的使用实例 var obj = {}; var thisobj = this; var str = this.txt; obj.index = index; function recursion() { var _obj = thisobj.findTime(obj.index); if(_obj.time) { obj.time += _obj.time; obj.index = _obj.index; } } // --------------- 可以在这里 扩展 其它功能 --------------- // lrc歌词只能精确到每句歌词,可以通过扩展lrc 精确 到 每个字 if(/\[\d{1,2}\:\d{1,2}\.\d{1,2}\]/.test(str.substr(index,10))) // [mm:ss.ff] { obj.time = str.substr(index+1,8) + "|"; obj.index = index+9+1; recursion(); } else if(/\[\d{1,2}\:\d{1,2}\]/.test(str.substr(index,7))) // [mm:ss] { obj.time = str.substr(index+1,5) + ".00" + "|"; obj.index = index+6+1; recursion(); } // 以下标签均属于合法标签,但很少被使用,请根据需要进行扩展 // [mm:ss.f] [mm:s.ff] [mm:s.f] [m:ss.ff] [m:s.ff] [m:s.f] // [mm:s] [m:ss] [s:s] return obj; }, findID:function(index){ // 查找预定义标识 //[ar:艺人名] //[ti:曲名] //[al:专辑名] //[by:编者(指编辑LRC歌词的人)] //[offset:时间补偿值] 其单位是毫秒,正值表示整体提前,负值相反。这是用于总体调整显示快慢的。(很少被使用) // 注:本程序也不支持 offset 功能(但是能取值),如需要 请自行在 sort 方法添加此功能 // 此处功能 使用 findTags方法 实现 var obj; obj = this.findTags(index,[{s:"["},{s:":"},{s:"]"}]); if(obj.booble) { if(obj.value[0].value=="ar") { this.ar = obj.value[1].value; } else if(obj.value[0].value=="ti") { this.ti = obj.value[1].value; } else if(obj.value[0].value=="al") { this.al = obj.value[1].value; } else if(obj.value[0].value=="by") { this.by = obj.value[1].value; } else if(obj.value[0].value=="offset") // 这里是 offset 的值 { this.offset = obj.value[1].value; } } }, analysis:function(){ // 解析 if(this.txt=="") return false; var str = this.txt; this.index = 0; for(var i=0;i<str.length;i++) { if(str.charAt(i)=="[") { var time = this.findTime(i); if(time.time) // 时间标签 { var lyric = this.findlyric(time.index); if(lyric.lyric!="\n" && lyric.lyric!="") // 去掉无意义歌词 { var timeArray = time.time.split("|"); for(var j=0;j<timeArray.length;j++) { if(timeArray[j]) { this.time[this.index] = timeArray[j]; this.lyric[this.index] = lyric.lyric; this.index+=1; } } } i = time.index; } else // 预定义标签 { this.findID(i); } } } this.sort(); this.createPanel(); }, play:function(position,CSS){ // 定位指定时间的歌词 var time; var obj = this; function set(index) { var height = parseInt($(obj.obj).find("div").css("height")); var top = parseInt($(obj.obj).find("div").css("margin-top")); $(obj.obj).animate({ scrollTop:(index*height+index*top-parseInt($(obj.obj).css("height"))/2+height/2) },300); for(var i in CSS) { $(obj.obj).find("div").eq(index).css(CSS,CSS[i]); } } for(var i=0;i<this.index;i++) { if(position==this.time[i]) { Set(i); return; } else if(position>this.time[i]) { time = i; } } set(time);// 没找到匹配时间 则就近最小选择 } }; binlyric.txt = s; binlyric.obj = ".lyricPanel"; binlyric.lyricCSS = {"font-size":"16px","margin-top":"15px","text-align":"center"}; binlyric.analysis(); binlyric.play("01:20.22",{ color:"red" }); alert("艺人名:"+binlyric.ar); alert("专辑名:"+binlyric.al); alert("歌词编者:"+binlyric.by); alert("歌曲名:"+binlyric.ti);
发现上面有正则表达的地方 显示出问题了,大家直接下源码吧,源码上有注释。
源码下载地址:http://pan.baidu.com/s/1eRrKwHs
本文属原创,转载请注明。
另外,求一份 web前端的工作(成都),QQ:2190460780。
相关文章推荐
- MJExtension json快速解析
- 事件流:DOM事件与IE事件,事件冒泡与事件捕获
- js的一些学习笔记1
- js动态设置输入框字体/颜色
- 警告: No configuration found for the specified action: 'register' in namespace: '/jsp'. Form action de
- Sea.JS入门教程
- 轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点
- 【Js】深入学习作用域与作用域链
- Javascript 题目集-题壹
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- 16 JSON解析、XML解析(DOM解析,SAX解析)
- js模块化之模块依赖处理
- 深入理解javascript之typeof和instanceof
- js基础2-深入理解javascript之typeof和instanceof
- Javascript 那些事-开篇
- ArcGIS JavaScript API 4.0 beta3 新特性
- javascript 涉及float的精确加减乘除运算
- 对javascript匿名函数的理解
- javascript大神修炼记(5)——OOP思想(封装)
- jstree的checkbox实例+详解