日前的一個(gè)項(xiàng)目需要用到語音播放功能。發(fā)現(xiàn)Audio5js符合需求且使用簡(jiǎn)單，又鑒于jQuery控件便于開發(fā)操作，于是有了以下的封裝。
首先先簡(jiǎn)單介紹一下Audio5js吧。
Audio5js是一個(gè)能夠幫助你解決類似這樣的瀏覽器兼容性問題的js類庫，輕量級(jí)并且能夠很優(yōu)雅的使用Flash向前兼容老版本的瀏覽器。
其主要特性：
Audio5js 官方地址：http://zohararad.github.io/audio5js/
下面開始介紹封裝方式
1、自定義jQuery插件方法：jquery.audio5js.js
1 /*! 2 * Jquery Audio5js: 基于Audio5js的Jquery簡(jiǎn)單封裝 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 // 初始化導(dǎo)航 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("播放出錯(cuò)！"); 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 : "點(diǎn)擊播放",106 'class' : "audio", // 正常樣式class107 playingClass : "audio-playing", // 播放時(shí)樣式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 標(biāo)準(zhǔn)案例：點(diǎn)擊圖片可以播放/暫停<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點(diǎn)中，請(qǐng)另行下載。
5、完整下載
jquery-audio5js.zip
6、經(jīng)測(cè)試：Chrome 44、QQ瀏覽器9、Firefox 35、IE 5/7/8/9/10/+可用，其它未測(cè)試。
注意：IE5/7/8的中自動(dòng)切換為flash播放器播放，但由于瀏覽器與flash播放器的安全性問題，需要將文件放置到中間件(如Tomcat)中才能見效果。
新聞熱點(diǎn)
疑難解答
圖片精選
