⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 同步歌词播放器.htm

📁 === === === === JavaScript经典源代码收集
💻 HTM
字号:
🔍 
<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歌词播放 通用演示版
  程序件者：小谢
  发行网站：http://qbit.100steps.net
  作者信箱：324324@qq.com
  制作日期：2005年09月14日

  说明：没什么实质上的改动，只是将播放器及歌词显示代码整合成函数方便
  调用。另加上了自动加载本地LRC歌词文件。
=====================================================================
*/

/*
=====================================================================
  程序名称：lrc歌词播放（完美版）
  程序件者：海浪
  发行网站：http://kongjianzhan.126.com
  作者信箱：xuhotao@163.com
  制作日期：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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").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;
var lrc_width=600;
var lrc_height=200;
var m_width=400; //Player控件宽度
var m_height=200; //Player控件高度
var m_url="http://xxmusic.163888.net/xx/star.mp3"; //音乐文件地址
var m_lrc="superstar.lrc"; //LRC歌词文件地址(不能跨域,否则没有权限下载)
var m_type=0; //0为使用 Media Player 控件，1为使用 Real Player 控件

function loadLrc()
{
	behaviorID.lrc=m_lrc;
	behaviorID.click();
}
function play()
{
	var m = lrcdata.value.slice(4,-3);
	lrcobj = new lrcClass(m);
	lrcobj.cnane = "lrcobj";
	lrcobj.haohaiplay = PlayerObj;
	lrcobj.oceanx = m_type;
	setInterval("lrcobj.run();",100);
}

function onDownloadDone(data) 
{ 
	lrcdata.value="<!--\n"+data+"\n-->";
	play();
} 

function showPlayer()
{
	if(m_type==0)
	{
		document.writeln("  <object classid=\"clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6\" id=\"PlayerObj\" ");
		document.writeln("  width=\""+m_width+"\" height=\""+m_height+"\">");
		document.writeln("    <param name=\"url\" value=\""+m_url+"\">");
		document.writeln("    <param name=\"rate\" value=\"1\">");
		document.writeln("    <param name=\"balance\" value=\"0\">");
		document.writeln("    <param name=\"currentPosition\" value=\"0\">");
		document.writeln("    <param name=\"playCount\" value=\"1\">");
		document.writeln("    <param name=\"autoStart\" value=\"-1\">");
		document.writeln("    <param name=\"volume\" value=\"100\">");
		document.writeln("    <param name=\"currentMarker\" value=\"0\">");
		document.writeln("    <param name=\"invokeURLs\" value=\"-1\">");
		document.writeln("    <param name=\"stretchToFit\" value=\"-1\">");
		document.writeln("    <param name=\"windowlessVideo\" value=\"0\">");
		document.writeln("    <param name=\"enabled\" value=\"-1\">");
		document.writeln("    <param name=\"enableContextMenu\" value=\"0\">");
		document.writeln("    <param name=\"fullScreen\" value=\"0\">");
		document.writeln("    <param name=\"enableErrorDialogs\" value=\"0\">");
		document.writeln("  <\/object>");		
	}
	else
	{
		document.writeln("  <object classid=\"clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA\" id=\"PlayerObj\"");
		document.writeln("  width=\""+m_width+"\" height=\""+m_height+"\">");
		document.writeln("    <param name=\"SRC\" value=\""+m_url+"\">");
		document.writeln("    <param name=\"AUTOSTART\" value=\"-1\">");
		document.writeln("    <param name=\"SHUFFLE\" value=\"0\">");
		document.writeln("    <param name=\"PREFETCH\" value=\"0\">");
		document.writeln("    <param name=\"NOLABELS\" value=\"-1\">");
		document.writeln("    <param name=\"CONTROLS\" value=\"Imagewindow,controlpanel,statusbar\">");
		document.writeln("    <param name=\"LOOP\" value=\"0\">");
		document.writeln("    <param name=\"NUMLOOP\" value=\"0\">");
		document.writeln("    <param name=\"CENTER\" value=\"0\">");
		document.writeln("    <param name=\"MAINTAINASPECT\" value=\"0\">");
		document.writeln("  <\/object>");
	}
}
function showLrc()
{
	document.writeln("<div id=\"bkk\" style=\"width:"+lrc_width+";\">");
	document.writeln("<div id=\"lrcollbox\" style=\"overflow:hidden; height:"+lrc_height+"; width:100%;\">");
	document.writeln("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\" id=\"lrcoll\" style=\"position:relative; top: 30px;\">");
	document.writeln("  <tr><td nowrap height=\"30\" align=\"center\" id=\"lrcwt1\"><\/td><\/tr>");
	document.writeln("  <tr><td nowrap height=\"30\" align=\"center\" id=\"lrcwt2\"><\/td><\/tr>");
	document.writeln("  <tr><td nowrap height=\"30\" align=\"center\" id=\"lrcwt3\"><\/td><\/tr>");
	document.writeln("  <tr><td nowrap height=\"30\" align=\"center\" class=\"kong\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
	document.writeln("    <tr><td nowrap height=\"30\"><span id=\"lrcbox\" style=\"width:0;\"><\/span><\/td><\/tr>");
	document.writeln("    <tr style=\"position:relative; top: -30px; z-index:6;\"><td nowrap height=\"30\"><span id=\"lrcbc\" style=\"overflow:hidden; width:0;\"><\/span><\/td>");
	document.writeln("  <\/tr>");
	document.writeln("<\/table><\/td><\/tr>");
	document.writeln("  <tr style=\"position:relative; top: -30px;\"><td nowrap height=\"30\" align=\"center\" id=\"lrcwt4\"><\/td><\/tr>");
	document.writeln("  <tr style=\"position:relative; top: -30px;\"><td nowrap height=\"30\" align=\"center\" id=\"lrcwt5\"><\/td><\/tr>");
	document.writeln("<\/table>");
	document.writeln("<\/div>");
	document.writeln("<\/div>");
}
</script>

</head>
<body bgcolor="#000000" onload="loadLrc()">
<input name="lrcdata" value="加载歌词文件" type="hidden" lrc="" id="behaviorID" style="behavior:url(#default#download)" onclick="this.startDownload(this.lrc,onDownloadDone)">
<center>
<table>
<tr>
<td width="260" height="200">
<script>showPlayer()</script>
</td>
<td width="180" height="200" id="lrcxx"></td>
</tr>
</table>
<script>showLrc()</script>
</center>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -