自己做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、完整下載
6、經測試：Chrome 44、QQ瀏覽器9、Firefox 35、IE 5/7/8/9/10/+可用，其它未測試。
注意：IE5/7/8的中自動切換為flash播放器播放，但由於瀏覽器與flash播放器的安全性問題，需要將文件放置到中間件(如Tomcat)中才能見效果。