jq 一个插件的小小注释

底部的html

<DIV class="weixinAudio" style="display:none;">
            <audio src="" id="media" width="1" height="1" preload></audio>
            <span id="audio_area" class="db audio_area">
                <span class="audio_wrp db">
                    <span class="audio_play_area">
                        <i class="icon_audiodefault"><img src="/images/shengyin02.png" alt=""></i>
                        <i class="icon_audioplaying"><img src="/images/shengyin.png" alt=""></i>
                    </span>
                    <span id="audio_length" class="audio_length tips_global"></span>
                    <span id="curent_time">0:00</span>
                    <span class="db audio_info_area">
                        <strong class="db audio_title">成飞建筑材料责任有限公司宣传片配音</strong>
                    </span>
                    <span id="int_c"></span>
                    <span class="progress_bar_box" style="width:1100px">
                    <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
            </span>
                </span>
            </span>

</DIV>

引用的一个插件

(function() {
    $.fn.weixinAudio = function(options) {
        var $this = $(this);
        var defaultoptions = {
            autoplay:false,
            src:'',
        };
        function Plugin($context) {
            //dom
            this.$context = $context;

            this.$Audio = $context.children('#media');//audio
            this.Audio = this.$Audio[0];
            this.$audio_area = $context.find('#audio_area');//底部播放整块
            this.$audio_length = $context.find('#audio_length');//time html
            this.$audio_progress = $context.find('#audio_progress');//播放进度条
            //属性
            this.currentState = 'pause';
            this.time = null;
            this.settings = $.extend(true, defaultoptions, options);
            //嵌套对象
            //extend 遍历数组元素，并修改第一个对象
            //执行初始化
            this.init();
        }
        Plugin.prototype = {
            init: function() {
                var self = this;
                self.updateTotalTime();
                self.events();
                // 设置src
                if(self.settings.src !== ''){
                    self.changeSrc(self.settings.src);
                }
                self.play();
                // 设置自动播放
                if(self.settings.autoplay){
                    self.play();
                }
            },
            play: function() {
                var self = this;
                if (self.currentState === "play") {
                    self.pause();
                    return;
                }
                self.Audio.play();
                clearInterval(self.timer);
                self.timer = setInterval(self.run.bind(self), 50);
                self.currentState = "play";
                self.$audio_area.addClass('playing');
            },
            pause: function() {
                var self = this;
                self.Audio.pause();
                self.currentState = "pause";
                clearInterval(self.timer);
                self.$audio_area.removeClass('playing');
            },
            stop:function(){

            },
            events: function() {
                var self = this;
                var updateTime;
                self.$audio_area.on('click', function() {
                    self.play();
                    if (!updateTime) {
                        self.updateTotalTime();
                        updateTime = true;
                    }
                });
            },
            //正在播放
            run: function() {
                var self = this;
                self.animateProgressBarPosition();
                if (self.Audio.ended) {
                    self.pause();
                }
            },
            //进度条
            animateProgressBarPosition: function() {
                var self = this,
                    percentage = (self.Audio.currentTime * 100 / self.Audio.duration) + '%';
                if (percentage == "NaN%") {
                    percentage = 0 + '%';
                }
                var styles = {
                    "width": percentage
                };
                var curs=Math.floor(self.Audio.currentTime);
                var curm=Math.floor(self.Audio.currentTime/60);
                if(curs<10){
                    curs=String(0)+String(curs);
                }
                self.$audio_progress.css(styles);
                $("#curent_time").text(curm+":"+curs)
            },
            
            //获取时间秒
            getAudioSeconds: function(string) {
                var self = this,
                    string = string % 60;
                string = self.addZero(Math.floor(string), 2);
                (string < 60) ? string = string: string = "00";
                return string;
            },
            //获取时间分
            getAudioMinutes: function(string) {
                var self = this,
                    string = string / 60;
                string = self.addZero(Math.floor(string), 2);
                (string < 60) ? string = string: string = "00";
                return string;
            },
            //时间+0
            addZero: function(word, howManyZero) {
                var word = String(word);
                while (word.length < howManyZero) word = "0" + word;
                return word;
            },
            //更新总时间
            updateTotalTime: function() {
                var self = this,
                    time = self.Audio.duration,
                    minutes = self.getAudioMinutes(time),
                    seconds = self.getAudioSeconds(time),
                    audioTime = minutes + ":" + seconds;
                self.$audio_length.text(audioTime);
            },
            //改变音频源
            changeSrc:function(src,callback){
                var self = this;
                self.pause();
                self.Audio.src = src;
                self.play();
                // callback();
            },
        };
        var obj = {}
        // var instantiate = function() {
        //      new Plugin($(this));
        // }
        $this.each(function(index,element){
            obj['weixinAudio'+index] = new Plugin($(this));
        }); //多个执行返回对象

        return obj
    }
})(jQuery)

在外面的列表中，有播放按钮，但一开始是点击列表中的播放按钮，弹出底部的播放框，然后要再点一次底部的播放按钮，音频才播放。

一开始想的是把列表中的播放按钮，写到插件中，所以想在

Plugin.prototype的events方法中再添加一些播放触发事件，却发现走不通，因为这个插件就是定义的底部的一个块，所有的事件方法就局限在此中，根本不知道该如何与外部的按钮联系起来。

 

后来觉得初始化的时候，就让它播放是不是就可以了，便在init中加了一句self.play();一试之下果然可以。

 

原来如此简单，只是想的太过复杂。