zoukankan      html  css  js  c++  java
  • JS控制网页lrc同步播放

    这个是早就想写的,呵呵。不过是 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>

  • 相关阅读:
    Dockfile 使用 非root 用户运行容器
    Latex 小记
    Tmux 小技巧
    配置本地 overleaf
    arm板载ubuntu18.04系统安装QT4.8.7
    移植32位QT程序到ubuntu18.04
    TLS1.0禁用问题
    TLS1.0禁用问题
    Delphi程序“自杀”的有效办法
    Delphi7程序出现“EOSError code8-存储不足”问题的分析与解决
  • 原文地址:https://www.cnblogs.com/top5/p/1671742.html
Copyright © 2011-2022 走看看