网页歌词同步代码
实现网页歌词同步的源码，含JS
演示地址：http://www.shnan.net/demo/lrcs/example.htm
代码下载：http://pan.baidu.com/share/link?shareid=57954&uk=3643590670
by：ishnan
<html>
<head>
<STYLE type=text/css>
TD { FONT-SIZE: 9pt; LINE-HEIGHT: 20px; }
BODY{
FONT-SIZE: 9pt;
LINE-HEIGHT: 10px;
}
#lrcollbox td, #lrcollbox font {font-family: arial; font-size: 15px;}
#lrcoll td { color:#0040a0; cursor: default; }
#lrcbox { color:#33FF33 }
#lrcfilter { filter: alpha(opacity=0) }
#lrcbc { color:#FF0000 }
</STYLE>
</head>
<script language="JavaScript">
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata">
<!--[ti:]
[ar:]
[al:]
[by:]
[00:00.01]你让我感动(抒情版)
[00:06.00]
[00:09.00]陈思思
[00:12.00]* * * * *
[00:18.00]你让我心动
[00:21.00]你让我感动
[00:25.00]你让我撒满一路
[00:28.00]芬芳的影踪
[00:32.00]温情在流动
[00:36.00]热情来相拥
[00:39.00]一份真的关怀
[00:42.00]你不说我也懂
[00:46.00]* *
[00:53.00]你让我心动
[00:57.00]你让我感动
[01:00.00]你让我撒满一路
[01:04.00]芬芳的影踪
[01:07.00]温情在流动
[01:11.00]热情来相拥
[01:14.00]一份真的关怀
[01:18.00]你不说我也懂
[01:22.00]* *
[01:25.00]祝福你每天每分钟
[01:28.00]都有开心的笑容
[01:32.00]平凡的生活平凡中
[01:35.00]活得快乐又放松
[01:39.00]祝福你每天每分钟
[01:43.00]坚强又从容
[01:46.00]我就在你的掌声中
[01:49.00]有那做不完的梦
[01:54.00]...MUSIC...
[02:16.00]你让我心动
[02:20.00]你让我感动
[02:23.00]你让我撒满一路
[02:27.00]芬芳的影踪
[02:30.00]温情在流动
[02:34.00]热情来相拥
[02:37.00]一份真的关怀
[02:41.00]你不说我也懂
[02:45.00]* *
[02:48.00]祝福你每天每分钟
[02:51.00]都有开心的笑容
[02:55.00]平凡的生活平凡中
[02:58.00]活得快乐又放松
[03:02.00]祝福你每天每分钟
[03:06.00]坚强又从容
[03:09.00]我就在你的掌声中
[03:12.00]有那做不完的梦
[03:16.00]祝福你每天每分钟
[03:20.00]忘了忧伤忘了痛
[03:23.00]走过了太多风和雨
[03:26.00]只求与你心相通
[03:30.00]祝福你每天每分钟
[03:34.00]希望在手中
[03:37.00]就算那岁月太匆匆
[03:40.00]迎来好花遍地红
[03:45.00]* *
[03:48.00]你让我心动 你让我感动
[03:55.00]你让我心动 你让我感动
[04:02.00]你让我心动 你让我感动
[04:09.00]你让我心动 你让我感动
[04:16.00]你让我心动 你让我感动
[04:23.00]你让我心动 你让我感动
[04:30.00]你让我心动 你让我感动
[04:37.00]你让我心动
[04:40.16]
[04:40.29]～完～
[04:40.67]
[04:41.03]Wwww.ShangNan.Org[04:41.32]
[04:41.55]尚楠保有权利-->
</span>
<center>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="460" height="66">
<param name="url" value="gequ/1.mp3">
<param name="volume" value="100">
<param name="enablecontextmenu" value="0">
<param name="enableerrordialogs" value="0">
</object>
<div id="lrcollbox" style="overflow:hidden; height:300; width:460; background-color:#000;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -15px;" 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">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="16"><span id="lrcwt6" style="height:16"></span></td></tr>
<tr style="position:relative; top: -20px; z-index:6"><td nowrap height="16"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#0040a0; height:16"></div></td></tr>
</table>
</td></tr>
<tr style="position:relative; top: -15px"><td nowrap height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="16"><span id="lrcbox" style="height:16"></span></td></tr>
<tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="16"><div id="lrcbc" style="overflow:hidden; height:16; width:0;"></div></td></tr>
</table>
</td></tr>
<tr style="position:relative; top: -20px;"><td nowrap height="20" align="center" id="lrcwt7"></td></tr>
<tr style="position:relative; top: -20px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr>
<tr style="position:relative; top: -20px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr>
<tr style="position:relative; top: -20px;"><td nowrap height="20" align="center" id="lrcwt10"></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;
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-6);
lrcwt2.innerText = this.retxt(ii-5);
lrcwt3.innerText = this.retxt(ii-4);
lrcwt4.innerText = this.retxt(ii-3);
lrcwt5.innerText = this.retxt(ii-2);
lrcwt6.innerText = this.retxt(ii-1);
lrcfilter.innerText = this.retxt(ii-1);
lrcwt7.innerText = this.retxt(ii+1);
lrcwt8.innerText = this.retxt(ii+2);
lrcwt9.innerText = this.retxt(ii+3);
lrcwt10.innerText = this.retxt(ii+4);
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("王伟航-200840920129");
var a=new Array("lrcwt1","lrcwt2","lrcwt3","lrcwt4","lrcwt5","lrcwt6","lrcwt7","lrcwt8","lrcwt9","lrcwt10","lrcwt11")
for(var b=0;b<11;b++)a[b].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>
