javascript之水平横向滚动歌词同步的应用

时间:2021-05-26

参考地址:http://aboutplayer.com
复制代码 代码如下:
varlrc0,lrc1,lrc2;
moveflag=false;
vartop,bottom;
varlrcobj;
varlrctop;
predlt=0;
curdlt=0;

functionlrcClass(tt)
{
this.inr=[];

this.oTime=0;

this.dts=-1;
this.dte=-1;
this.dlt=-1;
this.ddh;
this.fjh;

if(/\[offset\:(\-?\d+)\]/i.test(tt))
this.oTime=RegExp.$1/1000;

tt=tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");
tt=tt.replace(/\[[^\[\]\:]*\]/g,"");
tt=tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");
tt=tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");
tt=tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");
tt=tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,"");

while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))
{
tt=tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");
varzzzt=RegExp.$1;
/^(.+\])([^\]]*)$/.exec(zzzt);
varltxt=RegExp.$2;
vareft=RegExp.$1.slice(1,-1).split("][");
for(varii=0;ii<eft.length;ii++)
{
varsf=eft[ii].split(":");
vartse=parseInt(sf[0],10)*60+parseFloat(sf[1]);
varsso={t:[],w:[],n:ltxt}
sso.t[0]=Math.round((tse-this.oTime)*1000)/1000;
this.inr[this.inr.length]=sso;
}
}
this.inr=this.inr.sort(function(a,b){returna.t[0]-b.t[0];});

for(varii=0;ii<this.inr.length;ii++)
{
while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n))
{
this.inr[ii].n=this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%");
vartse=parseInt(RegExp.$1,10)*60+parseFloat(RegExp.$2);
this.inr[ii].t[this.inr[ii].t.length]=Math.round((tse-this.oTime)*1000)/1000;
}
lrcbc1.innerHTML="<font>"+this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>")+"</font>";
varfall=lrcbc1.getElementsByTagName("font");
for(varwi=0;wi<fall.length;wi++)
this.inr[ii].w[this.inr[ii].w.length]=fall[wi].offsetWidth;
this.inr[ii].n=lrcbc1.innerText;
}

this.overtop=function()
{
varii;
for(ii=this.inr.length-1;ii>0&&this.inr[ii].t[0]>ffbb;ii--){}
top=ii;
}

this.run=function(tme)
{
if(tme<this.dts||tme>=this.dte)
{
varii;
for(ii=this.inr.length-1;ii>=0&&this.inr[ii].t[0]>tme;ii--){}
if(ii<0)return;
this.ddh=this.inr[ii].t;
this.fjh=this.inr[ii].w;
this.dts=this.inr[ii].t[0];
this.dte=(ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;

if(!movable)
{
lrctop=140;
lrcoll.style.pixelTop=140;
lowlight(lrcbox1);
this.overtop();
overbottom();
for(varwi=1;wi<=this.inr.length;wi++)
{
eval("lrcbox"+wi).innerText=this.inr[wi-1].n;
eval("lrcbc"+wi).innerText=this.inr[wi-1].n;
}
movable=true;
}

if(this.dlt>0)lowcolor(eval("lrcbc"+this.dlt));
clearTimeout(lrc2);
if(this.dlt==ii-1)
{
predlt=this.dlt+1;
if(!ptms&&predlt>0)
{
eval("lrcbc"+predlt).filters.alpha.opacity=100;
eval("lrcbc"+predlt).style.width="100%";
highcolor(0,this.dte-this.dts);
}
toposition(1,this.dte-this.dts);
}
if(ii-this.dlt>1||ii-this.dlt<=-1)
{
if(this.dlt>=0)lowcolor(eval("lrcbc"+(this.dlt+1)));
if(this.dlt==-1||ii==0)
{
jumpto(ii-this.dlt-1);
toposition(1,this.dte-this.dts);
}
else
jumpto(ii-this.dlt);
}
if(this.dlt>=0)lowlight(eval("lrcbox"+(this.dlt+1)));
this.dlt=ii;
curdlt=ii;
if(!drdc)highlight(eval("lrcbox"+(this.dlt+1)));
if(drdc)
{
curlowcolor(eval("lrcbc"+(this.dlt+1)));
curhighcolor(0,this.dte-this.dts);
}
}
if(klok)
{
varbbw=0;
varki;
for(ki=0;ki<this.ddh.length&&this.ddh[ki]<=tme;ki++)
bbw+=this.fjh[ki];
varkt=ki-1;
varsc=((ki<this.ddh.length)?this.ddh[ki]:this.dte)-this.ddh[kt];
vartc=tme-this.ddh[kt];
bbw-=this.fjh[kt]-tc/sc*this.fjh[kt];
if(bbw>eval("lrcbox"+(this.dlt+1)).offsetWidth)
bbw=eval("lrcbox"+(this.dlt+1)).offsetWidth;
eval("lrcbc"+(this.dlt+1)).style.width=Math.round(bbw);
}
}
lrcbox1.innerText="";
}

functionoverbottom()
{
if(aboutplayer.currentMedia.duration>0)
{
varii;
for(ii=lrcobj.inr.length-1;ii>0&&lrcobj.inr[ii].t[0]-ffbb>=aboutplayer.currentMedia.duration;ii--){}
bottom=ii;
}
else
setTimeout("overbottom()",10);
}

functionjumpto(nline)
{
lrctop-=20*nline;
lrcoll.style.top=lrctop;
}

functiontoposition(step,dur)
{
if(moveflag)return;
lrcoll.style.top=lrctop--;
if(step<20)
{
step++;
setTimeout("toposition("+step+","+dur+");",dur*50);
}
}

functionhighcolor(step,dur)
{
if(moveflag)return;
eval("lrcbc"+predlt).filters.alpha.opacity=100-(step++)*10;
if(step<10)
lrc1=setTimeout("highcolor("+step+","+dur+");",dur*100);
}

functioncurhighcolor(step,dur)
{
if(moveflag)return;
eval("lrcbc"+(curdlt+1)).filters.alpha.opacity=(step++)*10;
if(step<10)
lrc2=setTimeout("curhighcolor("+step+","+dur+");",dur*100);
}

functionhighlight(lid)
{
lid.style.color="#00FF00";
}

functionlowcolor(lid)
{
clearTimeout(lrc1);
lid.style.width=0;
lid.filters.alpha.opacity=100;
}

functioncurlowcolor(lid)
{
lid.filters.alpha.opacity=0;
lid.style.width="100%";
}

functionlowlight(lid)
{
lid.style.color="#0080C0";
}

functionlrcrun(m)
{
lrcobj=newlrcClass(m);
lrc0=setInterval("try{lrcobj.run(aboutplayer.controls.currentPosition+ffbb)}catch(hh){}",10);
}

MakeMovable(lrcollbox);
functionMakeMovable(element)
{
element.attachEvent("onmousedown",onmousedown);
element.attachEvent("onmouseup",onmouseup);
element.attachEvent("onmousemove",onmousemove);
flagmove=false;
vars_y,o_y;
curpot=0;

functiononmousedown()
{
if(event.button!=1||moveflag||!movable||!type||bottom==0){flagmove=true;return;}
clearTimeout(lrc0);
if(curdlt>0)lowcolor(eval("lrcbc"+curdlt));
lowcolor(eval("lrcbc"+(curdlt+1)));
lowlight(eval("lrcbox"+(curdlt+1)));
if(lrcoll.style.pixelTop>120-top*20)lrcoll.style.top=120-top*20;
if(lrcoll.style.pixelTop<120-bottom*20)lrcoll.style.top=120-bottom*20;
s_y=event.clientY;
o_y=lrcoll.style.pixelTop;
element.style.cursor="n-resize";
element.setCapture();
moveflag=true;
}

functiononmousemove()
{
if(event.button!=1||!moveflag||flagmove)return;
varoffy=event.clientY-s_y;
if(o_y+offy<=120-top*20&&o_y+offy>=120-bottom*20)lrcoll.style.top=o_y+offy;
if(o_y+offy>120-top*20)lrcoll.style.top=120-top*20;
if(o_y+offy<120-bottom*20)lrcoll.style.top=120-bottom*20;
varpot=Math.floor((lrcoll.style.pixelTop-120)/-20);
if(pot!=curpot)
{
lowlight(eval("lrcbox"+(curpot+1)));
curpot=pot;
highlight(eval("lrcbox"+(curpot+1)));
}
}

functiononmouseup()
{
if(!moveflag||flagmove){flagmove=false;return;}
if(aboutplayer.playState==3)
{
if(lrcoll.style.pixelTop<=120-top*20&&lrcoll.style.pixelTop>100-top*20)
lrcobj.dte=-1;
else
lrcobj.dte=lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)-1].t[0];
if(lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]-ffbb<0)
aboutplayer.controls.currentPosition=0;
else
aboutplayer.controls.currentPosition=lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]-ffbb;
lrcobj.dlt=Math.floor((lrcoll.style.pixelTop-120)/-20);
lrctop=lrcoll.style.pixelTop;
}
else
{
lowlight(eval("lrcbox"+(curpot+1)));
highlight(eval("lrcbox"+(curdlt+1)));
lrcoll.style.top=o_y;
}
lrc0=setInterval("try{lrcobj.run(aboutplayer.controls.currentPosition+ffbb)}catch(hh){}",10);
element.releaseCapture();
element.style.cursor="hand";
moveflag=false;
}
}

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章