落拓居论坛 » 电脑网络 » 网页技术 » 记录
本页主题: 记录 打印 | 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题

落拓居士

头衔：骆驼 骆驼

级别: 管理员
精华: 28
发帖: 3944
威望: 3338 点
金钱: 70044 银两
贡献值: 27 点
好评度: 391 点
朋友圈: 落拓
在线时间:521(小时)
注册时间:2005-12-13
最后登录:2020-09-15
查看作者资料 发送短消息 引用回复这个帖子 推荐此帖

记录

本帖被 落拓居士 从 版主交流 移动到本区(2010-04-13)
Copy code
<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>
男人就应该象个男人,说男人的话,做男人的事!
顶端 Posted: 2008-05-12 12:52 | [楼 主]
落拓居论坛 » 网页技术

Total 0.036805(s) query 5, Time now is:12-22 00:05, Gzip disabled 蜀ICP备11007877号-1
Powered by PHPWind v5.3 Certificate Code © 2003-07 PHPWind.com Corporation