html5 同步歌词
时间:2024-12-23 20:01:04
来源:语文学习网
作者:管理员
涉及几个问题。
首先,需要有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;
}
最新更新
热门排行:
好一点的原唱歌词