寒窗轩,寒川的个人网络博客,记录互联网事,学习网络编程、分享工作经验、人生感悟,包括但不限于程序代码、数据库、Office办公、随笔等内容。

网页中加入在线lrc歌词的方法

说明:很有可能因为歌曲的ULR地址问题无法播放。请更改一个能用的歌曲地址测试。
<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>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata"><!--
[ti:]
[ar:]
[al:]
[by:]
[00:00.63]邓丽君
[00:04.13]漫步人生路
[00:05.88]寒川制作
[00:09.06]悠然小居
[00:24.37]在你身边路虽远
[00:29.62]末疲倦
[00:32.25]伴你漫行
[00:34.76]一段接一段
[00:37.17]越过高峰
[00:39.25]另一峰却又见
[00:42.31]目标推远
[00:44.06]让理想永远在前面
[00:47.78]路纵崎岖
[00:50.29]亦不怕受磨练
[00:53.14]愿一生中
[00:54.78]苦痛快乐也体验
[00:58.18]愉快悲哀
[01:00.80]在身边转又转
[01:03.97]风中赏雪
[01:05.51]雾里赏花
[01:06.82]快乐回旋
[01:08.79]母用计较
[01:10.76]快欣赏身边
[01:12.29]美丽每一天
[01:14.25]还愿确信
[01:16.01]美景良辰在脚边
[01:20.05]愿将欢笑声
[01:22.25]盖掩苦痛那一面
[01:24.98]悲也好 喜也好
[01:27.49]每天找到新发现
[01:30.12]让疾风吹呀吹
[01:32.75]尽管给我俩考验
[01:35.37]小雨点
[01:37.01]放心洒
[01:50.02]早已决心向着前
[01:56.99]路纵崎岖
[02:08.81]亦不怕受磨练
[02:12.13]愿一生中
[02:14.76]苦痛快乐也体验
[02:16.39]愉快悲哀
[02:20.01]在身边转又转
[02:22.74]风中赏雪
[02:24.27]雾里赏花
[02:25.69]快乐回旋
[02:27.55]母用计较
[02:29.52]快欣赏身边
[02:30.94]美丽每一天
[02:33.02]还愿确信
[02:34.88]美景良辰在脚边
[02:38.38]愿将欢笑声
[02:41.01]盖掩苦痛那一面
[02:43.52]悲也好 喜也好
[02:46.26]每天找到新发现
[02:48.88]让疾风吹呀吹
[02:51.51]尽管给我俩考验
[02:54.24]小雨点
[02:56.87]放心洒
[02:59.39]早已决心向着前
[03:02.45]悠然小居
[03:17.77]寒川制作
[03:30.78]欢迎光临

--></span>
<center>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240">
<param name="url" value="http://www.ai18.net/DLJMP3/漫步人生路.mp3">
<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("寒川");
  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>
 

程序 2006-09-23 17:50:44 21 0 6688 html编程script
文章写得不错?我是土豪我要在线打赏!
在线打赏

昵称:

验证码:验证码

评论:

文章分类
系统
程序
数据
Office
随笔
热门文章
python读取文件夹下图片并生成pdf文件
VB.net开发的word转pdf的小工具
使用python把word转成pdf
文章推荐
免责声明
关于博主
开篇第一章
随机推荐
PHP禁止某个IP或IP段访问
apache .htaccess强制访问手机,电脑页面
对Googlebot来访时间进行研究
php读取txt文本文档数据库转入mysql数据库
JPG、RAR合并器,可将rar转为jpg。
At her home
猖獗的贼娃子
搜索引擎优化(SEO)学习
终于升级了。
摸死你个性签名集合
友情连接
春燕网络
谢润的博客
企安文档