加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

歌词同步的隐藏式单曲播放器

(2007-05-23 20:21:10)
分类： 文化杂谈类此无声胜有声

用来添加到你博客首页的歌词同步的隐藏播放器,今天冰河没有时间写完整的教程了,这个可以参照文章: http://blog.sina.com.cn/u/48e939f1010009y5  制作

这是这个播放器代码如下:(代码说明有时间再写,文章谢绝转载!)

<html>
<head>
<title> lrc歌词同步播放-冰河</title>
<style>
body, td {font-family: 宋体; font-size: 0pt;}                           /*总体字体和颜色*/
#bkk { border: #000000 1px dotted; }                                    /*歌词边框属性*/
#lrcollbox td , #lrcollbox font { font-family: 黑体; font-size: 8pt; }  /*歌词的字体和文字大小*/
.kong { filter: Glow(color=#0066FF,strength=4) }                        /*歌词读取时加重颜色值*/
#lrcoll td { color:#009900 }                                            /*歌词初始颜色值*/
#lrcbox { color:#FFFFFF }                                               /*歌词文本框处背景颜色*/
#lrcbc { color:#99CCFF }                                                /*歌词初始颜色值*/
#lrcxx { display:none}                                                  /*隐藏歌曲演唱作者文字*/
#lrcwt1,#lrcwt5 { filter: alpha(opacity=100) } /*字体强化度*/
</style>

<script language="JavaScript">

/*
=====================================================================
  程序名称：lrc歌词同步播放（完美版）
  个人博客：[url]http://blog.sina.com.cn/binghe2008[/url]
  作者信箱：[email]lubing200@sina.com[/email]
  制作日期：2007年05月20日

  说明：本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_r("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 style="background:transparent;overflow-x:hidden;" onload="play()">
<span id="lrcdata"><!--
[ti:等一分钟]
[ar:徐誉滕]
[al:等一分钟]
[by:斑竹冰河]
[00:00.00]~~~等一分钟~~~
[00:03.57]词曲唱：徐誉滕
[00:11.27]╰☆//斑竹冰河╰☆//
[00:14.50]如果时间
[00:15.75]忘记了转
[00:18.15]忘了带走什么
[00:21.18]你会不会
[00:22.82]至今停在说爱我的那天
[00:27.27]然后在世界的一个角
[00:30.79]有了一个我们的家
[00:33.96]你说我的胸膛会让你感到暖
[02:06.39][00:39.68]如果生命
[02:07.84][00:43.13]没有遗憾
[02:09.34][00:45.04]没有波澜
[02:12.55][00:48.70]你会不会
[02:14.67][00:50.61]永远没有说再见的一天
[02:18.80][00:54.98]可能年少的心太柔软
[02:21.99][00:58.05]经不起风经不起浪
[02:25.88][01:01.53]若今天的我能回到昨天
[02:29.00][01:05.30]我会向自己妥协
[02:34.71][01:10.76]我在等一分钟
[02:36.35][01:12.38]或许下一分钟
[02:38.34][01:14.33]看到你闪躲的眼
[02:40.94][01:17.51]我不会让伤心的泪挂满你的脸
[02:46.92][01:23.20]我在等一分钟
[02:50.13][01:26.03]或许下一分钟
[02:52.01][01:28.14]能够感觉你也心痛
[03:28.79][02:54.96][01:31.14]那一年我不会让离别成永远
[03:39.42][01:38.01]
[03:00.87]我在等一分钟
[03:03.93]或许下一分钟
[03:05.58]看到你不舍的眼
[03:08.15]我会用一个拥抱换取你的转身
[03:13.62]我在等一分钟
[03:17.31]或许下一分钟
[03:18.97]如果你真的也心痛
[03:22.43]我会告诉你我的胸膛依旧暖
--></span>
<center>
<table>
<tr>
<td width="0" height="0">
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" id="realPlayerObj"
  width="0" height="0">
    <param name="SRC" value="http://mtvmtv.blog.66wz.com/UploadFiles/2007-3/36863436.mp3">
    <param name="AUTOSTART" value="-1">
    <param name="SHUFFLE" value="0">
    <param name="PREFETCH" value="-1">
    <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="200" height="200" id="lrcxx"></td>
</tr>
</table>
<div id="bkk" style="width:200;">
<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>

调用代码:
<IFRAME id=binghe name=player align=center marginWidth=0 marginHeight=0 src="http://bh.xoyoz.com/mp3/play.htm" frameBorder=0 width=200 scrolling=no height=220 allowTransparency></IFRAME>

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有