基於Jquery的音樂播放器進度條插件

　　自己基於豆瓣FM的ui仿寫qq音樂時，基於Jquery手寫的進度條插件，效果圖如下：

　　

　　主要特色：

　　　　① 可自適應掛載元素的寬度，也可以自己設置進度條寬度；

　　　　② 支持部分默認參數修改（具體見使用說明）；

　　　　③ 允許最大時間為23:59:59，高於此值將默認修改為此值；

　　　　④ 可以自己控制進度條動畫的開關及重置；

　　　　⑤ 可以獲取進度條當前時間和寬度，與H5的audio標簽協調使用。

　　使用說明：

/*
 * 功能描述：播放器進度條
 * 參數：
 *             option:掛載父元素
 *             inTime:進度條時間長度
 * 示例:
 *             $.playBar.addBar($('.wrap'),400);    -- 初始化進度條
 *             $.playBar.setDefault({               -- 默認參數修改
 *                width:200,                             -- 進度條寬度
 *                bgColor:'blue',                        -- 進度條背景顏色
 *                progressColor:'red',                   -- 進度條顏色
 *                ballColor:'yellow',                    -- 拖動觸發小圓球顏色
 *                beginColor:'lightgrey',                -- 初始時間字體顏色
 *                finishColor:'gray'                      -- 結束時間字體顏色
 *            })
 *             $.playBar.beginPlay();               -- 播放進度條
 *             $.playBar.endPlay();                 -- 結束播放進度條
 *             $.playBar.resetPlay(200);            -- 重置進度條，參數為新輸入時間
 */

　　插件源碼：

(function($,document){
    //定義初始化變量、方法構造函數
    var InitVariables = function(){
        this.barWidth = null;                    //進度條寬度
        this.barTime = null;                     //進度條展示時間
        this.onOff    = false;                   //記錄進度條是否進行播放
        this.timer = null;                       //記錄播放定時器
        this.curTime = 0;                        //記錄當前播放時間
        this.curWidth = 0;                       //記錄當前播放時間對應的寬度
        this.ballEl = null;
        this.timeBeginEl = null;
        this.timeEndEl = null;
        this.bgEl = null;
        this.curTimeEl = null;
    }
    InitVariables.prototype = {
        'setWidth':function(w){                    //設置進度條寬度
            this.barWidth = w;
            this.bgEl.width(w);
        },
        'setTime':function(t){                     //設置進度條時間
            this.barTime = t;
        },
        'setBGColor':function(color){              //設置進度條背景色
            this.bgEl.css('background-color',color);
        },
        'setProgressColor':function(color){        //設置進度條顏色
            this.curTimeEl.css('background-color',color);
        },
        'setBallColor':function(color){            //設置拖動小球顏色
            this.ballEl.css('background-color',color);
        },
        'setBeginColor':function(color){           //設置起始時間
            this.timeBeginEl.css('color',color);
        },
        'setFinishColor':function(color){          //設置結束時間
            this.timeEndEl.css('color',color);
        },
        'timeToString':function(time){             //時間轉00:00:00樣式
            if(time>24*3600){
                console.log("Error In 'timeToString'：輸入時間超過允許值，已默認修改為24*3600-1");
                time = 24*3600-1;
            }
            var strHour = parseInt(time/3600)>0 ? ((parseInt(time/3600)>9 ? '' : '0') + parseInt(time/3600)) : false;
            var strMinute = (parseInt(time/60%60)>9 ? '' : '0') + parseInt(time/60%60);
            var strSecond = (parseInt(time%60)>9 ? '' : '0') + parseInt(time%60);
            return strHour ? strHour+':'+strMinute+':'+strSecond: strMinute+':'+strSecond;
        },
        'beginPlay':function(){                    //開始運動指令
            var that = this;
            this.onOff = !this.onOff;
            this.timer=setInterval(that.changeBar.bind(this),1000);
        },
        'stopPlay':function(){                     //停止運動指令
            this.onOff = !this.onOff;
            clearInterval(this.timer);
        },
        'resetPlay':function(){                    //重置指令
            this.curTime = 0;
            this.curWidth = 0;
            this.curTimeEl.css("width",this.curWidth);
            this.ballEl.css("left",this.curWidth-this.ballEl.width()/2);
            this.timeBeginEl.html(this.timeToString(this.curTime));
            this.timeEndEl.html(this.timeToString(this.barTime));
        },
        'changeBar':function(){                    //動態改變函數
            this.curTime++;
            this.curWidth = this.curTime*this.barWidth/this.barTime;
            if (this.curWidth>=this.barWidth){this.stopPlay();this.resetPlay();}
            this.curTimeEl.css("width",this.curWidth);
            this.ballEl.css("left",this.curWidth-this.ballEl.width()/2);
            this.timeBeginEl.html(this.timeToString(this.curTime));
        },
        'moveEvent':function(ballEl,curTimeEl,contentEl){        //拖動函數
            var that = this;
            ballEl.on('mousedown',function(ev){
                var e=ev||document.event;
                var disX=event.clientX;
                e.preventDefault();
                e.stopPropagation();
                if (that.onOff){ clearInterval(that.timer);}
                $(document).on('mousemove',function(ev){
                    var e=ev||document.event;
                    e.preventDefault();
                    var newX=event.clientX;
                    var lefts=e.clientX-contentEl.offset().left;
                    if (lefts>that.barWidth){
                        lefts=that.barWidth;
                    }else if(lefts<0){
                        lefts=0;
                    }
                    that.curWidth = lefts;
                    that.curTime = parseInt(that.curWidth/that.barWidth*that.barTime);
                    that.curTimeEl.css("width",that.curWidth);
                    that.ballEl.css("left",that.curWidth-that.ballEl.width()/2);
                    that.timeBeginEl.html(that.timeToString(that.curTime));
                });
                $(document).on('mouseup',function(){
                    if (that.onOff){ that.timer=setInterval(that.changeBar.bind(that),1000);}
                    $(document).off('mousemove mouseup');
                });
            })
        }
    }
    //初始化變量對象
    var init = new InitVariables();
    $.playBar={
        //初始化進度條
        'addBar':function(option,inTime){
            if (arguments.length<2){return false;}
            init.setTime(inTime);
            option.empty();
            //載入DOM元素
            option.append($(
                `<div class='progress-bar'>
                    <div class='progress-bar-begin'>00:00</div>
                    <div class="progress-bar-content">
                        <div class="progress-bar-ball"></div>
                        <div class="progress-bar-cur"></div>
                    </div>
                    <div class="progress-bar-finish">${init.timeToString(inTime)}</div>
                </div>
            `));
            //獲取DOM元素
            init.ballEl = $('.progress-bar-ball');
            init.timeBeginEl = $('.progress-bar-begin');
            init.timeEndEl = $('.progress-bar-finish');
            init.bgEl = $('.progress-bar-content');
            init.curTimeEl = $('.progress-bar-cur');
            //初始化進度條寬度
            init.barWidth = init.bgEl.width();
            //綁定滑動事件
            init.moveEvent(init.ballEl,init.curTimeEl,init.bgEl);
        },
        'beginPlay':function(){
            init.beginPlay();
        },
        'endPlay':function(){
            init.stopPlay();
        },
        'resetPlay':function(time){
            init.setTime(time);
            init.resetPlay();
        },
        'setDefault':function(obj){
            if(obj.width){init.setWidth(obj.width);}
            if(obj.bgColor){init.setBGColor(obj.bgColor);}
            if(obj.progressColor){init.setProgressColor(obj.progressColor);}
            if(obj.ballColor){init.setBallColor(obj.ballColor);}
            if(obj.beginColor){init.setBeginColor(obj.beginColor);}
            if(obj.finishColor){init.setFinishColor(obj.finishColor);}
        },
        'getCurTime':function(){
            return init.curTime;
        },
        'getCurWidth':function(){
            return init.curWidth;
        }
    }
})(jQuery,document);

 

　　首次寫jquery插件，還有很大值得改進的地方~~