落拓居士 |
2008-05-12 12:52 |
<html> <head> <title> lrc歌词播放 演示 </title> <style> body, td { font-family: 宋体; font-size: 9pt; } #bkk { border: #9999FF 1px dotted; } #lrcollbox td , #lrcollbox font { font-family: 黑体; font-size: 15pt; } .kong { filter: Glow(color=#0066FF,strength=4) } #lrcoll td { color:#66CC99 } #lrcbox { color:#FFFFFF } #lrcbc { color:#99CCFF } #lrcxx { color:#FFFF00 } #lrcwt1,#lrcwt5 { filter: alpha(opacity=100) } </style>
<script language="JavaScript">
/* ===================================================================== 程序名称:lrc歌词播放(完美版) 程序件者:海浪 发行网站:[url]http://kongjianzhan.126.com[/url] 作者信箱:[email]xuhotao@163.com[/email] 制作日期:2005年09月12日
说明:本lrc歌词播放程序原是《浩海网络多格式播放器》中的一个组件, 现提取出来加以改进。本程序任何人都可以使用,但无论您转载或 对本程序作任何修改、美化、翻译等工作,请您*必须*保留此段版 权宣告的内容。 ===================================================================== */
// 为了兼容 IE5.0 结果好多正则的语法和处理方式都不能用,所以代码效率不是最高,郁闷。
function lrcClass(tt) //LRC歌词处理 类 { this.gsh="歌手:~1~\n曲名:~2~\n专辑:~3~\n编者:~4~"; this.inr = []; //行 this.oTime = 0; //余补时间 this.hailang; this.dts = -1; //当前行显示的s this.dte = -1; //当前行显示的e this.dlt = -1; //当前行 this.ddh; //当前行数据 this.fjh; this.haohaiplay; this.oceanx; this.cnane; //以上几个属性是为了判断是否还在上次显示的时间范围,以减少循环次数
if(/\[offset\:(\-?\d+)\]/i.test(tt)) //取offset余补时间 this.oTime = RegExp.$1/1000; this.gsh = this.gsh.replace("~1~",(/\[ar:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----"); this.gsh = this.gsh.replace("~2~",(/\[ti:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----"); this.gsh = this.gsh.replace("~3~",(/\[al:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----"); this.gsh = this.gsh.replace("~4~",(/\[by:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----"); lrcxx.innerText = this.gsh; 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.print(""); lrcwt1.innerText = ""; lrcwt2.innerText = ""; lrcwt3.innerText = ""; lrcwt4.innerText = ""; lrcwt5.innerText = ""; lrcbc.style.width = 0; }
lrcClass.prototype.run = function() { try { if(this.oceanx==0) this.runing(this.haohaiplay.controls.currentPosition, this.haohaiplay.currentMedia.duration); else this.runing(this.haohaiplay.GetPosition()/1000, this.haohaiplay.GetLength()/1000); } catch(hh){} }
lrcClass.prototype.runing = function(tme, plen) { 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]:plen;
lrcwt1.innerText = this.retxt(ii-3); lrcwt2.innerText = this.retxt(ii-2); lrcwt3.innerText = this.retxt(ii-1); lrcwt4.innerText = this.retxt(ii+1); lrcwt5.innerText = this.retxt(ii+2); this.print(this.retxt(ii)); if(this.dlt==ii-1) { clearTimeout(this.hailang); this.golrcoll(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); }
lrcClass.prototype.retxt = function(i) { return (i<0 || i>=this.inr.length)?"":this.inr[i].n; }
lrcClass.prototype.print = function(txt) { lrcbox.innerText = txt; lrcbc.innerText = txt; }
lrcClass.prototype.golrcoll = function(s) { lrcoll.style.top = 25-(s++)*5; lrcwt1.filters.alpha.opacity = 90-s*18; lrcwt5.filters.alpha.opacity = s*18+10; if(s<=5) this.hailang = setTimeout(this.cnane+".golrcoll("+s+")",120); }
////////////////////////////////////////////////////////////////////
var lrcobj;
function play() { var m = lrcdata.innerHTML.slice(4,-3); lrcobj = new lrcClass(m); lrcobj.cnane = "lrcobj"; lrcobj.haohaiplay = realPlayerObj; lrcobj.oceanx = 1; //0为使用 Media Player 控件,1为使用 Real Player 控件
setInterval("lrcobj.run();",100);
}
</script>
</head> <body bgcolor="#000000" onload="play()">
<span id="lrcdata"><!-- [ti:SUPER STAR] [ar:S.H.E] [al:SUPER STAR] [by:海浪] [offset:500] [la:zh] [00:00.00]S.H.E - SUPER STAR [00:09.35]浩海工作室 [00:14.76]笑 就歌颂 一皱眉头就心痛 [00:19.57]我没空理会我 只感受你的感受 [00:25.04]你要往哪走 把我灵魂也带走 [00:29.93]它为你着了魔 留着有什么用 [02:42.19][02:21.70][01:21.91][00:34.92]你是电 你是光 你是唯一的神话 [02:47.26][02:26.45][01:26.73][00:39.96]我只爱你 You are my super star [02:53.79][02:31.68][01:32.00][00:45.21]你主宰 我崇拜 没有更好的办法 [02:58.36][02:36.91][01:37.24][00:50.41]只能爱你 You are my super star [03:02.14]You're my super star boy [03:06.10]- END - [00:56.07]- music - [01:01.53]手 不是手 是 温柔的宇宙 [01:06.30]我这颗小星球 就在你手中转动 [01:11.86]请 看见我 让我有梦可以作 [01:16.80]我为你发了疯 你必须奖励我 [01:43.62]你是意义 是天是地是神的旨意 [01:54.10]除了爱你 没有真理 [01:58.71]火 你是火 是我飞蛾的尽头 [02:03.56]没想过要逃脱 为什么我要逃脱 [02:08.91]谢谢你给我 一段快乐的梦游 [02:13.99]如果我忘了我 请帮忙记得我 --></span>
<center> <table> <tr> <td width="260" height="200">
<!-- <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mediaPlayerObj" width="250" height="200"> <param name="url" value="e:\My Documents\My music\流行歌曲\S.H.E - super_star.wma"> <param name="rate" value="1"> <param name="balance" value="0"> <param name="currentPosition" value="0"> <param name="playCount" value="1"> <param name="autoStart" value="-1"> <param name="volume" value="100"> <param name="currentMarker" value="0"> <param name="invokeURLs" value="-1"> <param name="stretchToFit" value="-1"> <param name="windowlessVideo" value="0"> <param name="enabled" value="-1"> <param name="enableContextMenu" value="0"> <param name="fullScreen" value="0"> <param name="enableErrorDialogs" value="0"> </object> -->
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" id="realPlayerObj" width="250" height="180"> <param name="SRC" value="rtsp://202.101.180.186/050602/946649278_42267.rm"> <param name="AUTOSTART" value="-1"> <param name="SHUFFLE" value="0"> <param name="PREFETCH" value="0"> <param name="NOLABELS" value="-1"> <param name="CONTROLS" value="Imagewindow,controlpanel,statusbar"> <param name="LOOP" value="0"> <param name="NUMLOOP" value="0"> <param name="CENTER" value="0"> <param name="MAINTAINASPECT" value="0"> </object> </td> <td width="180" height="200" id="lrcxx"></td> </tr> </table> <div id="bkk" style="width:700;"> <div id="lrcollbox" style="overflow:hidden; height:210; width:100%;"> <table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: 30px;"> <tr><td nowrap height="30" align="center" id="lrcwt1"></td></tr> <tr><td nowrap height="30" align="center" id="lrcwt2"></td></tr> <tr><td nowrap height="30" align="center" id="lrcwt3"></td></tr> <tr><td nowrap height="30" align="center" class="kong"><table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="30"><span id="lrcbox" style="width:0;"></span></td></tr> <tr style="position:relative; top: -30px; z-index:6;"><td nowrap height="30"><span id="lrcbc" style="overflow:hidden; width:0;"></span></td> </tr> </table></td></tr> <tr style="position:relative; top: -30px;"><td nowrap height="30" align="center" id="lrcwt4"></td></tr> <tr style="position:relative; top: -30px;"><td nowrap height="30" align="center" id="lrcwt5"></td></tr> </table> </div> </div> </center>
</body> </html> |
|