如何用js完美的解析lrc歌词

要想解析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文件：

.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;jthis.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.lyric[i]+"

"); } 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;i1) { if(complete0) // 遇到2次开始标志就退出 { obj.booble = false; return obj; } } return obj; }, findlyric:function(index){ // 查找歌词： 有则返回 歌词、继续查找的位置， 否则只返回继续查找的位置 var obj = {}; var str = this.txt; var i; for(i=index;ithis.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。