lrc歌词动态显示

来源：互联网发布：哈希算法特点编辑：程序博客网时间：2024/04/28 18:51

<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) }

#idDownload {behavior:url(#default#download);}
</style>
<download id="idDownload">
<script language="JavaScript">

/*
=====================================================================
程序名称：lrc歌词播放（完美版）
程序件者：海浪
发行网站：<a href="http://kongjianzhan.126.com" target="_blank">http://kongjianzhan.126.com</a>
作者信箱：<a href="mailto:xuhotao@163.com">xuhotao@163.com</a>
制作日期：2005年09月12日

说明：本lrc歌词播放程序原是《浩海网络多格式播放器》中的一个组件，
现提取出来加以改进。本程序任何人都可以使用，但无论您转载或
对本程序作任何修改、美化、翻译等工作，请您*必须*保留此段版
权宣告的内容。
=====================================================================
*/

var lrcUrl="http://192.168.1.56/temp/1.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(m)
{
lrcobj = new lrcClass(m);
lrcobj.cnane = "lrcobj";
lrcobj.haohaiplay = realPlayerObj;
lrcobj.oceanx = 1;
//0为使用 Media Player 控件，1为使用 Real Player 控件

setInterval("lrcobj.run();",100);
}

function readLRC()
{
try {
idDownload.startDownload(lrcUrl,play);
} catch(hh){
alert("无法读取非本域歌词");
}

}

</script>

</head>
<body bgcolor="#000000" onload="readLRC()">

</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>