A modified version of a good lrc player.

最新推荐文章于 2024-03-23 00:27:52 发布
原创最新推荐文章于 2024-03-23 00:27:52 发布 · 984 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#function #javascript #c #css #url #oo
Javascript 专栏收录该内容
32 篇文章
订阅专栏
本文介绍了一个适用于周杰伦歌曲《霍元甲》的LRC歌词播放器，该播放器由李国强设计并经Stefli改进，能够显示多达8行歌词，支持HTML与JavaScript实现歌词与音乐同步播放。
This is a good lrc player which is designed by 李国强.
There is a requirement in csdn forum that somebody wants to modify this program,then it can show 8 lines lrc in the player.So i just make a little modification of it.

the latest version is in the http://www.stefli.com/

The source code as below:
<!DOCTYPE html PUBLIC "-///www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>播放器字幕类</title>
</head>
<style>
#my div{font-size:20px;font-family:"楷体_GB2312"; white-space: pre;}
</style>
<body>
<span id="lrcdata">
<!--
[ti:霍元甲]
[ar:周杰伦]
[al:SBLXK]
[00:55]吓命有几回合擂台等着
[00:57]生死状赢了什么冷笑着
[00:59]天下谁的第一又如何止
[01:02]干戈我辈尚武德
[01:04]我的拳脚了得
[01:06]却奈何徒增虚名一个
[01:09]江湖难测谁是强者
[01:11]谁争一统武林的资格
[01:14]小城里岁月流过去
[01:18]清澈的勇气
[01:22]洗涤过的回忆
[01:25]我记得你
[01:28]骄傲的活下去
[01:34]霍霍霍霍霍霍霍霍
[01:35]霍家拳的套路招式灵活
[01:38]我我我我我我我
[01:40]我活着生命就该完整渡过
[01:43]我我我我我我我
[01:45]我过错软弱从来不属于我
[01:48]霍霍霍霍霍霍霍霍
[01:50]我们精武出手无人能躲
[01:57]吓命有几回合擂台等着
[02:04]生死状赢了什么冷笑着
[02:08]天下谁的第一又如何止
[02:10]干戈我辈尚武德
[02:13]我的拳脚了得
[02:15]却奈何徒增虚名一个
[02:17]江湖难测谁是强者
[02:19]谁争一统武林的资格
[02:22]小城里岁月流过去
[02:27]清澈的勇气
[02:31]洗涤过的回忆
[02:33]我记得你
[02:36]骄傲的活下去
[02:42]霍霍霍霍霍霍霍霍
[02:44]霍家拳的套路招式灵活
[02:46]我我我我我我我
[02:49]我活着生命就该完整渡过
[02:51]我我我我我我我
[02:54]我过错软弱从来不属于我
[02:56]霍霍霍霍霍霍霍霍
[02:58]我们精武出手无人能躲
[03:04]music
[03:31]霍霍霍霍霍霍霍霍
[03:33]霍家拳的套路招式灵活
[03:35]我我我我我我我
[03:38]我活着生命就该完整渡过
[03:40]我我我我我我我
[03:43]我过错软弱从来不属于我
[03:45]霍霍霍霍霍霍霍霍
[03:47]我们精武出手无人能躲
[03:50]霍霍霍霍霍霍霍霍
[03:53]霍家拳的套路招式灵活
[03:55]我我我我我我我
[03:57]我活着生命就该完整渡过
[04:00]我我我我我我我
[04:02]我过错软弱从来不属于我
[04:04]霍霍霍霍霍霍霍霍
[04:07]我们精武出手无人能躲
[04:14]李国强制作(end) Stefli稍作改动
[04:33]谢谢使用-->
</span>
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mediaPlayerObj" 
  width="330" height="68">
    <param name="url" value="http://p1.5nd.com/20060919/2006/Z/20061234871621/48717941.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>
    </p>
<div style="white-space: pre; width:322px; height: 200px; background: #000; padding: 4px;" id="my"></div>
<pre id="msg">
</pre>
<script language="javascript">
/*=============================================================
入口参数说明：
 1.lrc歌词
 2.歌词显示所需的容器，CSS字体、字号同时应用于字幕
 3.播放器的ID
 4.字幕本底色
 5.字幕同步色
===============================================================*/
function LRC(s,divo2,m_id,c1,c2)
{

    LrcT=new Array();
    this.msg="";
    this.END=false;
    function FormatLrcText(s)
    {
        var s1="";
        ss=s.replace(/<[^<>]+/:[^<>]+>/g,"");//暂时不支持尖括号的歌词
        var ss2=s.replace(//[[^/[/]]+/:[^/[/]]+/]/g,"");
        while(//[[^/[/]]+/:[^/[/]]+/]/.test(s))//拆分成多行歌词
        {
            ss=s.replace(/(/[[^/[/]]+/:[^/[/]]+/])(.*)/,"$2");
            s1+=RegExp.$1+s2+"/n"
        }
        return s1;
    }
    function delnotes(s)        ////删除注释
    {
        ss=s.replace(//[/:/][^$/n]*(/n|$)/g,"$1");
        ss=s.replace(//[[^/[/]]*/]/g,function(s){return (/^/[[/d/:/.]+/]$/.test(s))?s:"";});
        return s.replace(/<[^<>]*>/g,function(s){return (/^<[/d/:/.]+>$/.test(s))?s:""});
    }
    function addLrcObj(s)
    {
        var msg="歌手:~1~<br>曲名:~2~<br>专辑:~3~<br>编者:~4~";;
        msgmsg = msg.replace("~1~",(//[ar:([^/[/]:]+)/]/i.test(s))?RegExp.$1:"----");
        msgmsg = msg.replace("~2~",(//[ti:([^/[/]:]+)/]/i.test(s))?RegExp.$1:"----");
        msgmsg = msg.replace("~3~",(//[al:([^/[/]:]+)/]/i.test(s))?RegExp.$1:"----");
        msgmsg = msg.replace("~4~",(//[by:([^/[/]:]+)/]/i.test(s))?RegExp.$1:"----");
        var oTime=0;
        if(//[offset/:(/-?/d+)/]/i.test(s))        ////取offset余补时间
        oTime = RegExp.$1/1000;
        s=delnotes(s)//删除注释
        ss=s.replace(//[[^/[/]]+/:[^/[/]]+/]+.*[/n/x0d/x0a]*/g,FormatLrcText);//拆分多重[]行
        var tmp=//[(/d+)/:([/d/.]+)/](.*)/;
        while(tmp.test(s))//压入歌词对象数组
        {
            ss=s.replace(tmp,"/n");
            LrcT[LrcT.length]={time:parseInt(RegExp.$1,10)*60+parseFloat(RegExp.$2)-oTime,text:RegExp.$3.toString()};
        }
        LrcT[LrcT.length]={time:10000,text:"无歌词"};
        LrcTLrcT=LrcT.sort(function(a1,a2){return a1.time-a2.time;});////排序
        return msg;
    }
    this.ShowObjInit=  function ()
    {
        var top,bk,showLeft,ShowLength;
        var s="<div style=/"position: absolute; z-index:53 ;overflow-y :hidden ;overflow-x:hidden;color:#ffffff;filter : Glow(Color=#ff00ff,Strength=2) Chroma(color=#ff00ff);/" id=/"showIdText/"><//div>";
        s+="<div style=/"position: absolute; z-index:51;overflow-y :hidden ;overflow-x:hidden;white-space: pre;color:"+c1+"/" id=/"showIdBack/"><//div>";
        s+="<div style=/"position: absolute; z-index: 52;overflow-y :hidden ; overflow-x:hidden;white-space: pre;filter : Glow(Color='red',Strength='3');color:"+c2+"/" id=/"showIdTextBottom/"><//div>";
        s+="<div style=/"position: absolute; visibility:hidden;z-index: 50;/" id=/"showIdTmp/"><//div>";
        document.getElementById(divo2).style.whiteSpace="pre";
        document.getElementById(divo2).innerHTML=s;
    }
    this.ShowObjInit();//初始化显示控件
    this.msg=addLrcObj(s);//构造歌词数组
    var MediaObj=document.getElementById(m_id);
    var CurIndex=1;//当前行索引
    if(LrcT.length>1)setText();
    var ol=LrcT.length-1;
    var lrcTextWidth=0;
    function setText()
    {
        var lrc="";
        for(var i=0;i<7;i++) {
            if(CurIndex+i>LrcT.length-1) {
                break;
            } else {
                lrc+="<br/>" + LrcT[CurIndex+i].text;
            }
        }
        document.getElementById("showIdText").innerHTML=LrcT[CurIndex-1].text + lrc;
        document.getElementById("showIdTextBottom").innerHTML=LrcT[CurIndex-1].text;
        document.getElementById("showIdBack").innerHTML=LrcT[CurIndex-1].text;
        document.getElementById("showIdTmp").innerHTML=LrcT[CurIndex-1].text;
        lrcTextWidth=parseInt(document.getElementById("showIdTmp").offsetWidth);
        lrcTextWidthlrcTextWidth=lrcTextWidth/(LrcT[CurIndex].time-LrcT[CurIndex-1].time);
    }
    this.run = function()
    {

        var CurTime=MediaObj.controls.currentPosition;
        var l;
        while(CurTime<LrcT[CurIndex-1].time && CurIndex>1)
        {
            CurIndex--;
            setText();
        }
        while(CurTime>LrcT[CurIndex].time)
        {
            if( CurIndex<ol)
            {
                CurIndex++;
                setText();
            }
            else
            {
                this.END=true;
            }
        }
        l=Math.round(lrcTextWidth*(CurTime-LrcT[CurIndex-1].time));
        if(l>=0)document.getElementById("showIdTextBottom").style.width=l;
    }
    this.newLrc=function(ss)
    {
            LrcT.splice(0,LrcT.length);
            this.msg=addLrcObj(ss);
            CurIndex=1;
            setText();
            ol=LrcT.length-1;
            lrcTextWidth=0;
            this.END=false;
            return this.msg;
    }

}
/////////////////////////////////////////////////////////////////////////////////////////////////////

document.body.onload=function(){
     oo=new LRC(lrcdata.innerHTML.slice(4,-3),"my","mediaPlayerObj","#ff00ff","#00ffff");
    setInterval('oo.run();if(oo.END)alert("end");',30);

}
</script>
</body>
</html>