现在的位置: 首页 > 综合 > 正文

JS控制网页lrc同步播放

2012年10月31日 ⁄ 综合 ⁄ 共 11879字 ⁄ 字号 评论关闭

这个是早就想写的,呵呵。不过是 IEonly的,没办法。

如果需要控制播放器的width,height等属性,可以使用lrcPlayer .getPlayer()获得实例。

************************************************

<html>
    <title>lrc歌词实时播放</title>
    <body>
        <div id="show" style="background=black;font-size:38px;text-align:center;height:500px; line-height:50px;overflow:auto;font-family:华文新 魏;color:white;"></div>     
        <style>
            .redLyric {font-size:38px;font-weight:bold;color:red;font-family:华文新魏;}
            .normalLyric {font-size:38px;font-family:华文新魏;color:white;}
        </style>
        <script>
            /*
            =====================================================================
              lrc歌词实时播放             
              非主流童话 2007-10-20 23:01
           
              说明:本程序任何人都可以使用,对于使用程序造成一切后果作者概不负责。
              转载或对本程序作任何修改,请您必须保留此段内容。
            =====================================================================
            */
            var lrcPlayer = {
                _lrcUrl : "",
                _lrcSong : "",
                _lrcShower : "",
                _songPlayer : "",
                _songType : "",
                _normalCss : "",
                _currentCss : "" ,

                _singer : "",
                _songTitle : "",
                _albumName : "",
                _lrcMaker : "" ,
                _offset : 0 ,

                _timeList : new Array(),
                _textList : new Array(),
                _intTimeList : new Array(),

                _textJoiner : "<br />",
                _textLrc : "",

                _currentKey : 0,

                _interval : 100,

                _errorMsg : {'not_ie':'不支持非IE浏览器' , 'can_not_get_lyric':"不能下载LRC歌词"},

                _prevLine : "",

                _prevKey : "",

                showError : function (showMessage , isEnd){
                    alert(showMessage);

                    if (isEnd)  exit(0);
                },

                isIe : function (){
                    return eval("false;/*@cc_on@if(@\x5fwin32)isMSIE=true@end@*/");
                },

                downloadLrc : function (){
                    document.body.addBehavior("#default#download");
                    try {
                        _this = this;
                        document.body.startDownload(this._lrcUrl , function(lrcString){_this.startPlay(lrcString)});
                    }
                    catch(exp){
                        this.showError(this._errorMsg["can_not_get_lyric"] , 1 );
                    }
                },

                startPlay : function (lrcString){
                    this.splitLrcString(lrcString);
                    this.sortLrcList();
                    this.joinLrcText();
                    this.showLrcText();

                    _this = this;
                    this._currentKey = 0;
                    setInterval(function(){_this.showCurrentLyric();},this._interval);
                },

                showCurrentLyric : function(){
                    currentTime = this.getCurrentTime() + parseInt(this._offset);

                    this.seekLrcText(currentTime);
                    
                    if (this._currentKey != this._prevKey && this._currentKey >= -1){
                         
                        currentKey = parseInt(this._currentKey);
                       
                        fontSize =   parseInt(this._lrcShower.style.fontSize.substr(0,this._lrcShower.style.fontSize.length-2));

                        lineHeight = parseInt(this._lrcShower.style.lineHeight.substr(0,this._lrcShower.style.lineHeight.length-2));

                        space = lineHeight - fontSize;

                        this._lrcShower.scrollTop = currentKey * fontSize  + (currentKey - 1) * space ;

                        currentLine = document.getElementById("lyric"+currentKey);
                        currentLine.className = this._currentCss;

                        if ("" != this._prevLine){
                            this._prevLine.className = this._normalCss;
                        }
                       
                        this._prevLine = currentLine;
                        this._prevKey = this._currentKey;
                    }

                },

                getCurrentTime : function (){
                    player = this.getPlayer();

                    return player.controls.currentPosition * 1000;

                },

                unsetList : function (list , n){
                    if( n < 0 ){
                        return list;
                    }
                    else{
                        return list.slice(0,n).concat(list.slice(n+1,list.length));
                    }
                },

                splitLrcString : function (lrcString){
                    var textList = lrcString.split(/\[.*?\]/);
                    var timeList = lrcString.split(/\][^\[]+/m);

                    var deleteList = new Array();
                    var item = "";
                    var tmp = "";

                    for (var i in timeList){
                        if (/\[ti:.*/.test(timeList[i])){
                            this._songTitle = timeList[i].substr(4,timeList[i].length-4);
                            deleteList.push(i);
                        }
                        else if (/\[ar:.*/.test(timeList[i])){
                            this._singer = timeList[i].substr(4,timeList[i].length-4);
                            deleteList.push(i);
                        }
                        else if (/\[al:.*/.test(timeList[i])){
                            this._albumName = timeList[i].substr(4,timeList[i].length-4);
                            deleteList.push(i);
                        }
                        else if (/\[by:.*/.test(timeList[i])){
                            this._lrcMaker = timeList[i].substr(4,timeList[i].length-4);
                            deleteList.push(i);
                        }
                        else if (/\[offset:.*/.test(timeList[i])){
                            this._offset = timeList[i].substr(8,timeList[i].length-4);
                            deleteList.push(i);
                        }
                        else{
                            item = timeList[i].substr(1,timeList[i].length-1);

                            tmp = item.split(/\]\w?\[/);

                            if (tmp.length > 1){
                                item = tmp[0];

                                for(j = 1 ; j < tmp.length ; ++j){
                                    timeList.push(tmp[j]);
                                    textList.push(textList[i]);
                                }
                            }

                            timeList[i] = item;
                        }
                    }

                    deleteList = deleteList.sort();

                    for ( i = 0 ; i < deleteList.length ; ++i){
                        timeList = this.unsetList(timeList , deleteList[i]-i);
                        textList = this.unsetList(textList , deleteList[i]-i);
                    }
                    this._timeList = timeList;
                    this._textList = textList;
                },

                sortLrcList : function (){
                    var intTimeList = new Array();

                    for( i = 0 ; i < this._timeList.length ; ++i  ){
                        min = this._timeList[i].split(":");
                        second = min[1].split(".");

                        intTimeList.push(parseInt(min[0]*60000) + parseInt(second[0]*1000) + parseInt(second[1])*1);
                    }

                    for(i = 0 ; i < intTimeList.length - 1; ++i){
                        for( j = i + 1 ; j < intTimeList.length  ; ++j){
                            if ( intTimeList[i] > intTimeList[j]  ){
                                tmp = intTimeList[i];
                                intTimeList[i] = intTimeList[j];
                                intTimeList[j] = tmp;

                                tmp = this._timeList[i];
                                this._timeList[i] = this._timeList[j];
                                this._timeList[j] = tmp;

                                tmp = this._textList[i];
                                this._textList[i] = this._textList[j];
                                this._textList[j] = tmp;
                            }
                        }
                    }

                    this._intTimeList =  intTimeList;
                },

                joinLrcText : function (){
                    for (i = -5 ; i < 0 ; ++ i){
                        this._textLrc += "<span id='lyric"+i+"'>&nbsp;</span>" + this._textJoiner ;
                    }
                    for (i = 0 ; i < this._textList.length ; ++i){
                        this._textLrc += "<span id='lyric"+i+"'>" + this._textList[i] + "</span>" + this._textJoiner ;
                    }
                },

                showLrcText : function (){
                    this._lrcShower.innerHTML = this._textLrc;
                },

                seekLrcText : function (seekTime){
                    this._currentKey = this.binarySearch(this._intTimeList , seekTime);
                },

                binarySearch : function (list , seekTime){
                    start = 0;
                    finish = list.length - 1;
                    mid = Math.floor( (start + length ) / 2) ;

                    while(start <= finish){
                        if (seekTime == list[mid] ){
                            return mid;
                        }
                        else if(seekTime > list[mid] ){
                            start = mid + 1;
                        }
                        else{
                            finish = mid - 1;
                        }
                        mid = Math.floor( (start + finish ) / 2) ;
                    }

                    return mid;
                },

                initSongPlayer : function (){
                    if (this._songType == "realplayer"){
                        return this.initRealplayer();
                    }
                    else{
                        return this.initMediaPlayer();
                    }
                },

                initRealplayer : function (){
                    return true; //暂时没有实现
                },

                initMediaPlayer : function () {
                    var playString = '  <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mediaPlayer" width="250" height="60">';
                    playString += '    <param name="url" value="'+this._lrcSong+'">';
                    playString += '    <param name="rate" value="1">';
                    playString += '    <param name="balance" value="0">';
                    playString += '    <param name="currentPosition" value="0">';
                    playString += '    <param name="playCount" value="9999">';
                    playString += '    <param name="autoStart" value="1">';
                    playString += '    <param name="volume" value="100">';
                    playString += '    <param name="currentMarker" value="0">';
                    playString += '    <param name="invokeURLs" value="-1">';
                    playString += '    <param name="stretchToFit" value="-1">';
                    playString += '    <param name="windowlessVideo" value="0">';
                    playString += '    <param name="enabled" value="-1">';
                    playString += '    <param name="enableContextMenu" value="0">';
                    playString += '    <param name="fullScreen" value="0">';
                    playString += '    <param name="enableErrorDialogs" value="0">';
                    playString += '    <param name="AutoRewind" value="1">';
                    playString += '  </object>';
                    document.body.insertAdjacentHTML("beforeEnd", playString);

                    return document.getElementById("mediaPlayer");
                },

                init : function (lrcUrl , lrcSong , lrcShower , normalCss , currentCss ,songType){
                    if (!this.isIe()) this.showError(this._errorMsg["not_ie"] , 1 );

                    this._lrcUrl = lrcUrl;
                    this._lrcSong = lrcSong;
                    this._lrcShower = document.getElementById(lrcShower);
                    this._songType = songType;
                    this._normalCss = normalCss;
                    this._currentCss = currentCss;
                   

                    this._songPlayer = this.initSongPlayer();

                    this.downloadLrc();
                },

                getPlayer : function (){
                    return this._songPlayer;
                }
            }
            lrcPlayer.init("E:/音频/歌曲/快乐练习曲/周传雄 - 快乐练习曲.lrc" , "E:/音频/歌曲/快乐练习曲/01.快乐练习曲.mp3" , "show" , "normalLyric" , "redLyric");
        </script>
    </body>
</html>

抱歉!评论已关闭.