Horizontal scrolling of javascript lyrics

Reference: http://aboutplayer.com
Copy codeThe Code is as follows:
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 <eft. length; 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 <this. inr. length; ii ++)
{
While (/<[^ <>] + \: [^ <>] +>/. test (this. inr [ii]. n ))
{
This. inr [ii]. n = this. inr [ii]. n. replace (/<(\ d +) \ :( [\ d \.] +)>/, "% = % ");
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 = "<font>" + this. inr [ii]. n. replace (// g ,"&"). replace (/</g, "<"). replace (/>/g, "> "). replace (/% = %/g, "</font> <font>") + "</font> ";
Var fall = lrcbc1.getElementsByTagName ("font ");
For (var wi = 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 ()
{
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. dts | tme> = this. dte)
{
Var ii;
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. finr = 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 (var wi = 1; wi <= this. inr. length; wi ++)
{
Eval ("lrcbox" + wi). innerText = this. AUC [wi-1]. n;
Eval ("lrcbc" + wi). innerText = this. AUC [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)
{
Var bbw = 0;
Var ki;
For (ki = 0; ki <this. ddh. length & this. ddh [ki] <= tme; ki ++)
Bbw + = this. fjh [ki];
Var kt = ki-1;
Var SC = (ki <this. ddh. length )? This. ddh [ki]: this. dte)-this. ddh [kt];
Var tc = tme-this. ddh [kt];
Bbw-= this. FW [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 <20)
{
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 <10)
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 <10)
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 <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;
}

Function onmousemove ()
{
If (event. button! = 1 |! Moveflag | flagmove) return;
Var offy = 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;
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. 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;
}
}