jQuery语音播放插件

自己做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
标签: HTML5, jQuery, JavaScript, Audio