自己做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

 /*!
  * Jquery Audio5js: 基于Audio5js的Jquery简单封装
  * http://www.cnblogs.com/yvanwu/
  * yvan.wu 2015
  */
 /**
     使用方式：
     如：
     $("#voice1").audio5js({
         url : "voice/demo.mp3"
     });
  */
 !function ($) {
     var Audio = function (element, options) {
         this.$element = $(element);
         this.options = $.extend({}, $.fn.audio5js.defaults, options);
         this.init();
     };
     Audio.prototype = {
         constructor : Audio,
         // 初始化导航
         init : function(){
             var settins = this.options;
             var ele = this.$element;
             var audio = this;
             // 初始化样式
             ele.addClass(settins['class']);
             ele.attr("title", settins.title);
             // 初始化audio5js
             settins.audio5js = new Audio5js({
                 swf_path: 'https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf',
                   ready: function(){
                     this.load(settins.url);
                     ele.click(function(){
                         audio.playPause();
                     });
                     this.on('play', function () {
                         ele.removeClass(settins['class']);
                         ele.addClass(settins.playingClass);
                     }, this);
                     this.on('pause', function () {
                         ele.removeClass(settins.playingClass);
                         ele.addClass(settins['class']);
                     }, this);
                       this.on('ended', function () {
                           ele.removeClass(settins.playingClass);
                         ele.addClass(settins['class']);
                       }, this);
                     //error event passes error object to callback
                       this.on('error', function (error) {
                         //alert("播放出错！");
                       }, this);
                   }
             });
         },
         playPause : function () {
             var audio5js = this.options.audio5js;
             if (audio5js.playing) {
                   audio5js.pause();
                   audio5js.volume(0);
             } else {
                 audio5js.seek(0); //回到最开始的位置
                   audio5js.play();
                   audio5js.volume(1);
             }
           },
           pause : function(){
               var audio5js = this.options.audio5js;
               if (audio5js.playing) {
                   audio5js.pause();
                   audio5js.volume(0);
               }
           },
           play : function(){
               var audio5js = this.options.audio5js;
               if (!audio5js.playing) {
                   audio5js.play();
                   audio5js.volume(1);
               }
           },
           getAudio5js : function(){
               return this.options.audio5js;
           }

     };
     $.fn.audio5js = function (option, value) {
         var methodReturn;

         var $set = this.each(function () {
             var $this = $(this);
             var data = $this.data('audio');
             var options = typeof option === 'object' && option;
             if (!data) {
                 $this.data('audio', (data = new Audio(this, options)));
             }
             if (typeof option === 'string') {
                 methodReturn = data[option](value);
             }
         });
         return (methodReturn === undefined) ? $set : methodReturn;
     };

     $.fn.audio5js.defaults = {
         url : "", //音频文件地址
         title : "点击播放",
         'class' : "audio", // 正常样式class
         playingClass : "audio-playing", // 播放时样式class
         audio5js : {}
     };

     $.fn.audio5js.Constructor = Audio;
 }(window.jQuery);

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

 /*播放样式*/
 .audio {
     cursor: pointer;
     background: url("../images/voice.png") 0 -512px no-repeat;
     width: 60px;
     height: 60px;
     vertical-align: middle;
     display: inline-block;
 }
 .audio-playing {
     cursor: pointer;
     background: url("../images/voice.gif") 0 0 no-repeat;
     width: 60px;
     height: 60px;
     vertical-align: middle;
     display: inline-block;
 }

3、案例页面：demo.html

 <!DOCTYPE html>
 <html>
     <head>
         <title>Jquery Audio5js Demo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" href="css/jquery.audio5js.css" />
         <script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/jquery/1.8.3/jquery.min.js"></script>
         <script type="text/javascript" src="https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5.min.js"></script>
         <script type="text/javascript" src="js/jquery.audio5js.js"></script>
     </head>

     <body>
         标准案例：点击图片可以播放/暂停<br />
         <span id="voice1" ></span>

         <br />
         <br />
         <br />
         JS控制：<br />
         <input type="button" value="播放/停止" onclick="$('#voice1').audio5js('playPause')" />
         <input type="button" value="播放" onclick="$('#voice1').audio5js('play')" />
         <input type="button" value="暂停" onclick="$('#voice1').audio5js('pause')" />
         <script type="text/javascript">
         $(function(){
             $("#voice1").audio5js({
                 url : "voice/demo.mp3"
             });
         });
         </script>
     </body>
 </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)中才能见效果。