你的位置:首页 > 软件开发 > Java > 自己做jQuery插件:将audio5js封装成jQuery语音播放插件

自己做jQuery插件:将audio5js封装成jQuery语音播放插件

发布时间:2015-08-21 10:00:08
日前的一个项目需要用到语音播放功能。发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装。首先先简单介绍一下Audio5js吧。Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash ...

日前的一个项目需要用到语音播放功能。发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装。

首先先简单介绍一下Audio5js吧。

Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器。

其主要特性:

  • 拥有完整API来控制“加载”,“播放”,“暂停”,“音量”和“查找”
  • 并且可以得到播放内容的具体相关信息
  • 不依赖任何类库
  • 兼容版本浏览器,包括:IE8, IE9, Chrome 23 (Mac), Firefox 17 (Mac), Safari 6, Opera 12 (Mac), Safari Mobile (iOS 6.0), Webkit Mobile (Android 4.0.4)

Audio5js 官方地址:http://zohararad.github.io/audio5js/

下面开始介绍封装方式

1、自定义jQuery插件方法:jquery.audio5js.js

 1 /*! 2  * Jquery Audio5js: 基于Audio5js的Jquery简单封装 3  * http://www.cnblogs.com/yvanwu/ 4  * yvan.wu 2015 5 */ 6 /** 7   使用方式: 8   如: 9   $("#voice1").audio5js({ 10     url : "voice/demo.mp3" 11   }); 12 */ 13 !function ($) { 14   var Audio = function (element, options) { 15     this.$element = $(element); 16     this.options = $.extend({}, $.fn.audio5js.defaults, options); 17     this.init(); 18   }; 19   Audio.prototype = { 20     constructor : Audio, 21     // 初始化导航 22     init : function(){ 23       var settins = this.options; 24       var ele = this.$element; 25       var audio = this; 26       // 初始化样式 27       ele.addClass(settins['class']); 28       ele.attr("title", settins.title); 29       // 初始化audio5js 30       settins.audio5js = new Audio5js({ 31         swf_path: 'https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf', 32          ready: function(){ 33           this.load(settins.url); 34           ele.click(function(){ 35             audio.playPause(); 36           }); 37           this.on('play', function () { 38             ele.removeClass(settins['class']); 39             ele.addClass(settins.playingClass); 40           }, this); 41           this.on('pause', function () { 42             ele.removeClass(settins.playingClass); 43             ele.addClass(settins['class']); 44           }, this); 45            this.on('ended', function () { 46              ele.removeClass(settins.playingClass); 47             ele.addClass(settins['class']); 48            }, this); 49           //error event passes error object to callback 50            this.on('error', function (error) { 51             //alert("播放出错!"); 52            }, this); 53          } 54       }); 55     }, 56     playPause : function () { 57       var audio5js = this.options.audio5js; 58       if (audio5js.playing) { 59          audio5js.pause(); 60          audio5js.volume(0); 61       } else { 62         audio5js.seek(0); //回到最开始的位置 63          audio5js.play(); 64          audio5js.volume(1); 65       } 66      }, 67      pause : function(){ 68        var audio5js = this.options.audio5js; 69        if (audio5js.playing) { 70          audio5js.pause(); 71          audio5js.volume(0); 72        } 73      }, 74      play : function(){ 75        var audio5js = this.options.audio5js; 76        if (!audio5js.playing) { 77          audio5js.play(); 78          audio5js.volume(1); 79        } 80      }, 81      getAudio5js : function(){ 82        return this.options.audio5js; 83      } 84       85   }; 86   $.fn.audio5js = function (option, value) { 87     var methodReturn; 88  89     var $set = this.each(function () { 90       var $this = $(this); 91       var data = $this.data('audio'); 92       var options = typeof option === 'object' && option; 93       if (!data) { 94         $this.data('audio', (data = new Audio(this, options))); 95       } 96       if (typeof option === 'string') { 97         methodReturn = data[option](value); 98       } 99     });100     return (methodReturn === undefined) ? $set : methodReturn;101   };102 103   $.fn.audio5js.defaults = {104     url : "", //音频文件地址105     title : "点击播放",106     'class' : "audio", // 正常样式class107     playingClass : "audio-playing", // 播放时样式class108     audio5js : {}109   };110 111   $.fn.audio5js.Constructor = Audio;112 }(window.jQuery);

原标题:自己做jQuery插件:将audio5js封装成jQuery语音播放插件

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。