网页卡拉OK歌词同步播放技术

发布时间：2006-04-13 23:34:22　来源：天极网网友评论 0 条

<html><head><meta http-equiv=Content-Type content=text/html; charset=gb2312><title>网页陶吧 -- 千言万语</title><STYLE type=text/css>TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; }BODY{FONT-SIZE: 9pt;LINE-HEIGHT: 17px;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}#lrcoll td { color:#0080C0; cursor: default; }#lrcbox { color:#00FF00 }#lrcfilter { filter: alpha(opacity=0) }#lrcbc { color:#FFFF33 }</STYLE></head><script language="JavaScript">self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);</script><base onmouseover="window.status=' aboutplayer.com 别忘了把地址告诉你QQ上的朋友哦！'; return true;"><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><span id="lrcdata"></span><center><object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240"><param name="url" value="http://aboutplayer.com/play.asp?id=6&action=url"><param name="volume" value="100"><param name="enablecontextmenu" value="0"><param name="enableerrordialogs" value="0"></object><div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;"><table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" oncontextmenu="return false;"><tr><td nowrap height="20" align="center" id="lrcwt1"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt2"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt3"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt4"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt5"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt6"></td></tr><tr><td nowrap height="20" align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td nowrap height="20"><span id="lrcwt7" style="height:20"></span></td></tr><tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"></div></td></tr></table></td></tr><tr style="position:relative; top: -20px"><td nowrap height="20" align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td nowrap height="20"><span id="lrcbox" style="height:20">歌词加载中</span></td></tr><tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20"><div id="lrcbc" style="overflow:hidden; height:20; width:0;"></div></td></tr></table></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt10"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt11"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt12"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt13"></td></tr></table></div></center><script language="JavaScript">var lrc0;var lrc1;var min;lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));function lrcClass(tt){  this.inr = [];  this.min = [];  this.oTime = 0;  this.dts = -1;  this.dte = -1;  this.dlt = -1;  this.ddh;  this.fjh;  lrcbc.style.width = 0;  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] = tse-this.oTime;      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] = tse-this.oTime;    }    lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +"</font>";    var fall = lrcbc.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 = lrcbc.innerText;  }  for(var ii=0; ii<this.inr.length-1; ii++)    this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);  this.min.sort(function(a,b){return a-b});  min = this.min[0]/2;  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;      lrcwt1.innerText = this.retxt(ii-7);      lrcwt2.innerText = this.retxt(ii-6);      lrcwt3.innerText = this.retxt(ii-5);      lrcwt4.innerText = this.retxt(ii-4);      lrcwt5.innerText = this.retxt(ii-3);      lrcwt6.innerText = this.retxt(ii-2);      lrcwt7.innerText = this.retxt(ii-1);      lrcfilter.innerText = this.retxt(ii-1);      lrcwt8.innerText = this.retxt(ii+1);      lrcwt9.innerText = this.retxt(ii+2);      lrcwt10.innerText = this.retxt(ii+3);      lrcwt11.innerText = this.retxt(ii+4);      lrcwt12.innerText = this.retxt(ii+5);      lrcwt13.innerText = this.retxt(ii+6);      this.print(this.retxt(ii));      if(this.dlt==ii-1)      {        clearTimeout(lrc0);        if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;        golrcoll(0);        clearTimeout(lrc1);        lrcfilter.filters.alpha.opacity = 100;        golrcolor(0);      }      else if(parseInt(lrcoll.style.top)!=-20)      {        clearTimeout(lrc0);        lrcoll.style.top = -20;        clearTimeout(lrc1);        lrcfilter.filters.alpha.opacity = 0;      }      this.dlt = ii;    }    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>lrcbox.offsetWidth)      bbw = lrcbox.offsetWidth;    lrcbc.style.width = Math.round(bbw);  }  this.retxt = function(i)  {    return (i<0 || i>=this.inr.length)?"":this.inr[i].n;  }  this.print = function(txt)  {    lrcbox.innerText = txt;    lrcbc.innerText = txt;  }  this.print("www.aboutplayer.com");  lrcwt1.innerText = "";  lrcwt2.innerText = "";  lrcwt3.innerText = "";  lrcwt4.innerText = "";  lrcwt5.innerText = "";  lrcwt6.innerText = "";  lrcwt7.innerText = "";  lrcfilter.innerText = "";  lrcwt8.innerText = "";  lrcwt9.innerText = "";  lrcwt10.innerText = "";  lrcwt11.innerText = "";  lrcwt12.innerText = "";  lrcwt13.innerText = "";}function lrcrun(){  with(aboutplayer)  {    lrcobj.run(controls.currentPosition);  }  if(arguments.length==0) setTimeout("lrcrun()",10);}function golrcoll(s){  lrcoll.style.top = -(s++)*2;  if(s<=9)    lrc0 = setTimeout("golrcoll("+s+")",min*10);}function golrcolor(t){  lrcfilter.filters.alpha.opacity = 110-(t++)*10;  if(t<=10)    lrc1 = setTimeout("golrcolor("+t+")",min*10);}window.onerror = function(){return true;}lrcrun();</script></body></html>

无相关信息

【评论】【收藏本文】【打印】【关闭】

上一篇文章：网页播放技术-鼠标拖动歌词定位播放

下一篇文章：网页播放技术的实战解析（二）