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<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.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(var wi=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) 
    { 
      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.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<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; 
  } 
}