自己做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", // 正常样式class
107         playingClass : "audio-playing", // 播放时样式class
108         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)中才能见效果。

分类: Html5, JavaScript, jQuery