你的位置:首页 > Java教程

[Java教程]自己做jQuery插件:将audio5js封装成jQuery语音播放插件


日前的一个项目需要用到语音播放功能。发现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);

 2、语音插件样式:jquery.audio5js.css

 1 /*播放样式*/ 2 .audio { 3   cursor: pointer; 4   background: url("../images/voice.png") 0 -512px no-repeat; 5   width: 60px; 6   height: 60px; 7   vertical-align: middle; 8   display: inline-block; 9 }10 .audio-playing {11   cursor: pointer;12   background: url("../images/voice.gif") 0 0 no-repeat;13   width: 60px;14   height: 60px;15   vertical-align: middle;16   display: inline-block;17 }

 3、案例页面:demo.html

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <title>Jquery Audio5js Demo</title> 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6     <link rel="stylesheet" href="css/jquery.audio5js.css" />     7     <script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/jquery/1.8.3/jquery.min.js"></script>     8     <script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5.min.js"></script> 9     <script type="text/javascript" src="js/jquery.audio5js.js"></script>10   </head>11 12   <body>13     标准案例:点击图片可以播放/暂停<br />14     <span id="voice1" ></span>15     16     <br />17     <br />18     <br />19     JS控制:<br />20     <input type="button" value="播放/停止" onclick="$('#voice1').audio5js('playPause')" />21     <input type="button" value="播放" onclick="$('#voice1').audio5js('play')" />22     <input type="button" value="暂停" onclick="$('#voice1').audio5js('pause')" />23     <script type="text/javascript">24     $(function(){25       $("#voice1").audio5js({26         url : "voice/demo.mp3"27       });28     });29     </script>30   </body>31 </html>

4、样式的图片资源与案例的音频文件在第5点中,请另行下载。

5、完整下载

jquery-audio5js.zip

6、经测试:Chrome 44、QQ浏览器9、Firefox 35、IE 5/7/8/9/10/+可用,其它未测试。

注意:IE5/7/8的中自动切换为flash播放器播放,但由于浏览器与flash播放器的安全性问题,需要将文件放置到中间件(如Tomcat)中才能见效果。