这个东西是我在很久以前在无忧脚本(51js.com)论坛看到的，那时候好像LRC歌词同步显示的插件刚流行不久，看到这么好的东西当然收藏了，不知道现在是否有新的版本。不过我觉得以经很完美了。如果你懂一点js代码的话应该可以适当的修改为你喜欢的界面，适合用在音乐网站。

功能介绍：

支持歌曲格式：mp3,wma,rm等，可同步显示lrc歌词

结合服务器端程序，你可以很方便的集成到网站系统中。做个后台，字段设置：歌手，歌名，专辑，歌词等！使用时前台调用数据库内容就可以了。

界面截图：

下面引用作者的话：

 程序名称：lrc歌词播放（完美版）
  程序件者：海浪
  发行网站：http://kongjianzhan.126.com（我试过已经失效）
  作者信箱：xuhotao@163.com
  制作日期：2005年09月12日
  说明：本lrc歌词播放程序原是《浩海网络多格式播放器》中的一个组件，
        现提取出来加以改进。本程序任何人都可以使用，但无论您转载或
        对本程序作任何修改、美化、翻译等工作，请您*必须*保留此段版 权宣告的内容。

海浪是无忧的资深版主，当然也是一个javascript编程高手，而且有很多作品是关于播放器的。想了解更多关于作者的信息吗？http://bbs.51js.com/viewpro.php?uid=9187

LRC歌词在线网页播放器演示

下载的的话把演示页面另存为即可。

贴上js部分源代码：

<script language="JavaScript">

//  为了兼容 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;

function play()
{
  var m = lrcdata.innerHTML.slice(4,-3);
  lrcobj = new lrcClass(m);
  lrcobj.cnane = "lrcobj";
  lrcobj.haohaiplay = mediaPlayerObj;
  lrcobj.oceanx = 0;
  //0为使用 Media Player 控件，1为使用 Real Player 控件

  setInterval("lrcobj.run();",100);

}

</script>