上一篇
下一篇
网页音乐播放器歌词滚动JavaScript代码
作者:兜兜 日期:2009-01-14
网页音乐播放器歌词滚动JavaScript代码，如下：
<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: 14px;}
#lrcoll td { color:#000000; cursor: default; }
#lrcbox { color:#00FF00 }
#lrcfilter { filter: alpha(opacity=0) }
#lrcbc { color:#00FF00 }
</STYLE>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata"><!--
[00:00.00][ti:突然好想你]
[ar:五月天]
[al:后青春期的诗]
[00:02.00]五月天 - 突然好想你
[00:04.00]
[00:06.00]
[00:08.00]
[00:13.36]最怕空气突然安静
[00:20.24]最怕朋友突然的关心
[00:26.17]最怕回忆突然翻滚
[00:30.17]绞痛着不平息
[00:33.06]最怕突然听到你的消息
[00:40.01]
[00:40.71]想念如果会有声音
[00:47.59]不愿那是悲伤的哭泣
[00:53.54]事到如今
[00:55.75]终於让自已属於我自已
[01:00.53]只剩眼泪还骗不过自己
[01:07.04]
[01:07.74]突然好想你
[01:11.27]你会在哪里
[01:14.71]过的快乐或委屈
[01:21.48]突然好想你
[01:24.98]突然锋利的回忆
[01:28.44]突然模糊的眼睛
[01:34.95]
[01:35.65]我们像一首最美丽的歌曲
[01:42.48]变成两部悲伤的电影
[01:48.44]为什麽你
[01:50.69]带我走过最难忘的旅行
[01:55.38]然後留下最痛的纪念品
[02:03.64]
[02:29.24]我们那麽甜 那麽美
[02:33.17]那麽相信
[02:34.91]那麽疯 那麽热烈的曾经
[02:38.96]为何我们
[02:40.62]还是要奔向各自的幸福
[02:44.28]和遗憾中老去
[02:46.57]
[02:47.27]突然好想你
[02:50.67]你会在哪里
[02:54.08]过的快乐或委屈
[03:00.91]突然好想你
[03:04.38]突然锋利的回忆
[03:07.82]突然模糊的眼睛
[03:14.28]
[03:14.98]最怕空气突然安静
[03:21.91]最怕朋友突然的关心
[03:27.93]最怕回忆突然翻滚
[03:31.84]绞痛着不平息
[03:34.82]最怕突然听到你的消息
[03:41.50]最怕此生已经决定自己过
[03:47.16]没有你却又突然
[03:51.35]听到你的消息
[03:59.68]~~End~~--></span>
<left>
<object id="aboutplayer" width="250" height="45" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6">
<param value="http://images.dangdang.com/onlineplay/music/五月天%20-%20突然好想你.mp3" name="URL" />
<param value="1" name="rate" />
<param value="1" name="currentPosition" />
<param value="1" name="playCount" />
<param value="-1" name="autoStart" />
<param value="full" name="uiMode" />
<param value="-1" name="stretchToFit" />
<param value="-1" name="enableContextMenu" /></object>
<div id="lrcollbox" style="overflow:hidden; width:250; height:260; background-color:#FFFFFF; border-style:dotted; border-color:#CCCCCC; border-width:thin">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;">
<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 lrcO;
ffbb = 0;
lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr = [];
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;
}
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(lrcO);
golrcoll(0);
golrcolor(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("兜兜小地盘");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcwt6.innerText = "";
lrcwt8.innerText = "";
lrcwt9.innerText = "";
lrcwt10.innerText = "";
lrcwt11.innerText = "";
lrcwt12.innerText = "";
lrcwt13.innerText = "";
}
function bb()
{
ffbb = ffbb - 0.5;
}
function ff()
{
ffbb = ffbb + 0.5;
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition + ffbb);
}
if(arguments.length == 0) setTimeout("lrcrun()",10);
}
function golrcoll(s)
{
lrcoll.style.top = -2-(s++)*3;
if(s<=6)
lrcO = setTimeout("golrcoll("+s+")",100);
}
function golrcolor(t)
{
lrcfilter.filters.alpha.opacity = 100-(t++)*10;
if(t<=10)
setTimeout("golrcolor("+t+")",60);
}
function killErrors()
{
return true;
}
window.onerror = killErrors;
lrcrun();
</script>
</body>
</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: 14px;}
#lrcoll td { color:#000000; cursor: default; }
#lrcbox { color:#00FF00 }
#lrcfilter { filter: alpha(opacity=0) }
#lrcbc { color:#00FF00 }
</STYLE>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata"><!--
[00:00.00][ti:突然好想你]
[ar:五月天]
[al:后青春期的诗]
[00:02.00]五月天 - 突然好想你
[00:04.00]
[00:06.00]
[00:08.00]
[00:13.36]最怕空气突然安静
[00:20.24]最怕朋友突然的关心
[00:26.17]最怕回忆突然翻滚
[00:30.17]绞痛着不平息
[00:33.06]最怕突然听到你的消息
[00:40.01]
[00:40.71]想念如果会有声音
[00:47.59]不愿那是悲伤的哭泣
[00:53.54]事到如今
[00:55.75]终於让自已属於我自已
[01:00.53]只剩眼泪还骗不过自己
[01:07.04]
[01:07.74]突然好想你
[01:11.27]你会在哪里
[01:14.71]过的快乐或委屈
[01:21.48]突然好想你
[01:24.98]突然锋利的回忆
[01:28.44]突然模糊的眼睛
[01:34.95]
[01:35.65]我们像一首最美丽的歌曲
[01:42.48]变成两部悲伤的电影
[01:48.44]为什麽你
[01:50.69]带我走过最难忘的旅行
[01:55.38]然後留下最痛的纪念品
[02:03.64]
[02:29.24]我们那麽甜 那麽美
[02:33.17]那麽相信
[02:34.91]那麽疯 那麽热烈的曾经
[02:38.96]为何我们
[02:40.62]还是要奔向各自的幸福
[02:44.28]和遗憾中老去
[02:46.57]
[02:47.27]突然好想你
[02:50.67]你会在哪里
[02:54.08]过的快乐或委屈
[03:00.91]突然好想你
[03:04.38]突然锋利的回忆
[03:07.82]突然模糊的眼睛
[03:14.28]
[03:14.98]最怕空气突然安静
[03:21.91]最怕朋友突然的关心
[03:27.93]最怕回忆突然翻滚
[03:31.84]绞痛着不平息
[03:34.82]最怕突然听到你的消息
[03:41.50]最怕此生已经决定自己过
[03:47.16]没有你却又突然
[03:51.35]听到你的消息
[03:59.68]~~End~~--></span>
<left>
<object id="aboutplayer" width="250" height="45" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6">
<param value="http://images.dangdang.com/onlineplay/music/五月天%20-%20突然好想你.mp3" name="URL" />
<param value="1" name="rate" />
<param value="1" name="currentPosition" />
<param value="1" name="playCount" />
<param value="-1" name="autoStart" />
<param value="full" name="uiMode" />
<param value="-1" name="stretchToFit" />
<param value="-1" name="enableContextMenu" /></object>
<div id="lrcollbox" style="overflow:hidden; width:250; height:260; background-color:#FFFFFF; border-style:dotted; border-color:#CCCCCC; border-width:thin">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;">
<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 lrcO;
ffbb = 0;
lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr = [];
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;
}
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(lrcO);
golrcoll(0);
golrcolor(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("兜兜小地盘");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcwt6.innerText = "";
lrcwt8.innerText = "";
lrcwt9.innerText = "";
lrcwt10.innerText = "";
lrcwt11.innerText = "";
lrcwt12.innerText = "";
lrcwt13.innerText = "";
}
function bb()
{
ffbb = ffbb - 0.5;
}
function ff()
{
ffbb = ffbb + 0.5;
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition + ffbb);
}
if(arguments.length == 0) setTimeout("lrcrun()",10);
}
function golrcoll(s)
{
lrcoll.style.top = -2-(s++)*3;
if(s<=6)
lrcO = setTimeout("golrcoll("+s+")",100);
}
function golrcolor(t)
{
lrcfilter.filters.alpha.opacity = 100-(t++)*10;
if(t<=10)
setTimeout("golrcolor("+t+")",60);
}
function killErrors()
{
return true;
}
window.onerror = killErrors;
lrcrun();
</script>
</body>
</html>
文章来自: 
引用通告: 
Tags: 评论: 2 | 引用: 0 | 查看次数: -
回复
发表评论
想請問一下，如果要把整個都置中的話要在哪邊加代碼呢？