html5歌词

1、《U》韩国超人气组合Super junior的经典之作，有中文跟韩文两个版本，相信喜欢韩庚的朋友都已经知道这首歌的经典之处了！视频地址： 、《Dreams come true》韩国美少女白金组合SES的经典之作，婵联十周KM-TV的排行榜冠军宝座，其MV能带人进入一个梦幻的国度！视频地址： 、《Darling》一首非常欢快的歌，由韩国Shinvi（神飞）组合所作，神飞的出道有个很响亮的称号，那就是“S.E.S.”第二。MV的背景似乎是一个电脑游戏穿插着三位可爱的美眉，非常不错！视频地址： 、《Come to me》不知道你对于Milk这样一个组合是否了解？MV也是拍得非常好，几位女生动感十足，欢快极了。用一句肯德基的广告语来概括就是：“能唤醒你一早的活力！”视频地址： 、《Shine》韩国人气组合东方神起，这首歌我觉得很棒！视频地址： 音乐【Ｅ】族→权威专业原创的回答【发现抄袭一律投诉】

涉及几个问题。

首先，需要有LRC文件，可以放在本地或者用Ajax读取。

其次需要解析LRC文件，生成排序的数组。下面的代码供参考。

最后，利用<audio>标签的currentTime属性获得当前播放的时间，实时刷新歌词显示。具体的显示代码可做成单行（最简单，替换标签内文本即可）、双行或者多行高亮都可以。

functionparseLyric(text){

lyric=text.split('\r\n');//先按行分割

var_l=lyric.length;//获取歌词行数

lrc=newArray();//新建一个数组存放最后结果

for(i=0;i<_l;i++){

vard=lyric[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g);//正则匹配播放时间

vart=lyric[i].split(d);//以时间为分割点分割每行歌词，数组最后一个为歌词正文

if(d!=null){//过滤掉空行等非歌词正文部分

//换算时间，保留两位小数

vardt=String(d).split(':');

var_t=Math.round(parseInt(dt[0].split('[')[1])*60+parseFloat(dt[1].split(']')[0])*100)/100;

lrc.push([_t,t[1]]);

}

returnlrc;

}