寒窗轩,寒川的个人网络博客,记录互联网事,学习网络编程、分享工作经验、人生感悟,包括但不限于程序代码、数据库、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 0 0 3412 html编程script

昵称:

验证码:验证码

评论:

文章分类
系统
程序
数据
Office
随笔
热门文章
pdf、word、txt、excel等文档转flash(swf)软件—虚拟打印机FlashPaper
win10华硕fl5900u笔记本开机进入桌面后转圈卡死怎么办
PHP以Excel模板填充数据并生成新的Excel文件
PHP实现远程下载,并显示实时下载进度
记一次Seafile数据迁移
基于ThinkPHP6的API注释文档自动生成扩展
如何让电脑的多个声卡设备(蓝牙音响)同时输出声音
2020开局不顺
win10切换虚拟桌面
Win10更新后不显示文字
文章推荐
请不要奇怪,为什么最近博客的文章是几年前的内容
免责声明
关于博主
开篇第一章
随机推荐
实验常用正交表
Excel如何批量替换字符串?讲解Excel的字符替换函数SUBSTITUTE
mysql insert插入语句性能优化
准备用心做个网站
At her home
php防止快速刷新的方法
伤心的虚拟主机
宝宝日志-宝宝明天就能看到你了
简单的一个asp的分页程序
网页编程之针对html源码的搜索引擎优化(SEO)建议
友情连接
春燕网络