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

参考地址：http://aboutplayer.com

var lrc0, lrc1, lrc2;
moveflag = false;
var top, bottom;
var lrcobj;
var lrctop;
predlt = 0;
curdlt = 0;

function lrcClass(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");
var zzzt = RegExp.$1;
/^(.+\])([^\]]*)$/.exec(zzzt);
var ltxt = RegExp.$2;
var eft = RegExp.$1.slice(1,-1).split("][");
for(var ii=0; ii {
var sf = eft[ii].split(":");
var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);
var sso = { 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){return a.t[0]-b.t[0];} );

for(var ii=0; ii {
while(/]+\:[^]+>/.test(this.inr[ii].n))
{
this.inr[ii].n = this.inr[ii].n.replace(//,"%=%");
var tse = 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 = ""+ this.inr[ii].n.replace(/&/g,"&").replace(/,"/g,">").replace(/%=%/g,"") +" ";
var fall = lrcbc1.getElementsByTagName("font");
for(var wi=0; wi this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;
this.inr[ii].n = lrcbc1.innerText;
}

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

this.run = function(tme)
{
if(tme=this.dte)
{
var ii;
for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
if(ii this.ddh = this.inr[ii].t;
this.fjh = this.inr[ii].w;
this.dts = this.inr[ii].t[0];
this.dte = (ii
if(!movable)
{
lrctop = 140;
lrcoll.style.pixelTop = 140;
lowlight(lrcbox1);
this.overtop();
overbottom();
for(var wi=1; 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 {
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)
{
var bbw = 0;
var ki;
for(ki=0; ki bbw += this.fjh[ki];
var kt = ki-1;
var sc = ((ki var tc = 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";
}

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

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

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

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

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

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

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

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

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

function lrcrun(m)
{
lrcobj = new lrcClass(m);
lrc0 = setInterval("try {lrcobj.run(aboutplayer.controls.currentPosition+ffbb)} catch(hh){}",10);
}

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

function onmousedown()
{
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 s_y = event.clientY;
o_y = lrcoll.style.pixelTop;
element.style.cursor = "n-resize";
element.setCapture();
moveflag = true;
}

function onmousemove()
{
if(event.button!=1 || !moveflag || flagmove) return;
var offy = event.clientY-s_y;
if(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 var pot = Math.floor((lrcoll.style.pixelTop-120)/-20);
if(pot!=curpot)
{
lowlight(eval("lrcbox"+(curpot+1)));
curpot = pot;
highlight(eval("lrcbox"+(curpot+1)));
}
}

function onmouseup()
{
if(!moveflag || flagmove) {flagmove = false; return;}
if(aboutplayer.playState==3)
{
if(lrcoll.style.pixelTop100-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 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;
}
}