jq a little plug comments

html bottom

<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" > flying into building materials limited liability company dub videos </ strong > 
                    </ span > 
                    < span the above mentioned 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>

A plug-cited

(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'); // bottom piece playing 
            the this $ audio_length context.find = $ ( '# audio_length');. // Time HTML 
            the this . audio_progress = $ $ context.find ( '#audio_progress'); // playback progress bar 
            // attribute 
            the this .currentState = 'PAUSE' ;
             the this .time = null ;
             the this .settings = $ .extend ( to true , defaultOptions, Options);
             // nested object 
            / / Extend through the array elements, and modifying the first object 
            // perform initialization 
            the 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 = the src; 
                self.play (); 
                // the callback (); 
            }, 
        }; 
        var obj = {}
         // var the instantiate = function () { 
        //       new new Plugin ($ (the this)); 
        / / } 
        $ the this .each ( function (index, Element) { 
            obj [ 'weixinAudio' + index] = new new Plugin ($ ( the this )); 
        }); // plurality of objects execution returns 

        return obj 
    } 
}) (the jQuery)

In the list out, there is a play button, but the beginning is click the play button in the list box at the bottom of the pop-up player, and then once again point the bottom of the play button, the audio was playing.

 

Start thinking about is the play button in the list, wrote plug-in, so I wanted in

events method Plugin.prototype's add some players to trigger an event, only to find a dead end, because this is a plug at the bottom of the block definition, all of the events on the limited methods herein, did not know how to contact an external button stand up.

 

Then I thought initialization time, let it play is not on it, he added, in the init self.play (); indeed can under a try.

 

The original so simple, just think too complicated.