js实现歌词同步

有三种方法：

1、做成GIF动画图片，方法：在一张图片上加一图层，写上字，让字移动。按L+SHIFT+M会进入Imageready，在帧里会看到gif的每个跳转画面。

2、做成flash动画，方法：在时间轴里建一层放歌词的层，首先要试听歌曲，看看第一句在哪一帧上结束，在开始播放歌曲的那一帧起到要显示的歌曲第一句的最后一帧上，在最后一帧上做出插入关键帧，然后设置运话补间就做到同步了。

3、用网页代码，如html或css，依然是图片为背景，文字动作。大致方法：用div+css+js实现的，用后台代码(asp/php)分析出lrc文件播放段与歌词数组，然后分析前台播放对应的时间，突显的当歌词。这是原理，网上很多代码可以实现的。

涉及几个问题。

首先，需要有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;

}