底部的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();一试之下果然可以。
原来如此简单,只是想的太过复杂。