javascript之水平横向滚动歌词同步的应用
javascript之水平横向滚动歌词同步的应用
发布时间:2016-12-30 来源:查字典编辑
摘要:参考地址:http://aboutplayer.com复制代码代码如下:varlrc0,lrc1,lrc2;moveflag=false;v...

参考地址: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(/(([[^[]]+:[^[]]+])+[^[rn]*)[^[]*/,"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="www.aboutplayer.com";

}

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;

}

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类