自己做jQuery插件：将audio5js封装成jQuery语音播放插件
日前的一个项目需要用到语音播放功能。发现Audio5js符合需求且使用简单，又鉴于jQuery控件便于开发操作，于是有了以下的封装。
首先先简单介绍一下Audio5js吧。
Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库，轻量级并且能够很优雅的使用Flash向前兼容老版本的浏览器。
其主要特性：
拥有完整API来控制“加载”，“播放”，“暂停”，“音量”和“查找”并且可以得到播放内容的具体相关信息不依赖任何类库兼容版本浏览器，包括：IE8, IE9, Chrome23 (Mac), Firefox17 (Mac), Safari 6, Opera12 (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 20155*/6/**7使用方式：8如：9$("#voice1").audio5js({10url : "voice/demo.mp3"11});12*/13!function($) {14varAudio =function(element, options) {15this.$element =$(element);16this.options =$.extend({}, $.fn.audio5js.defaults, options);17this.init();18};19Audio.PRototype ={20constructor : Audio,21//初始化导航22init :function(){23varsettins =this.options;24varele =this.$element;25varaudio =this;26//初始化样式27ele.addClass(settins['class']);28ele.attr("title", settins.title);29//初始化audio5js30settins.audio5js =newAudio5js({31swf_path: 'https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf',32ready:function(){33this.load(settins.url);34ele.click(function(){35audio.playPause();36});37this.on('play',function() {38ele.removeClass(settins['class']);39ele.addClass(settins.playingClass);40},this);41this.on('pause',function() {42ele.removeClass(settins.playingClass);43ele.addClass(settins['class']);44},this);45this.on('ended',function() {46ele.removeClass(settins.playingClass);47ele.addClass(settins['class']);48},this);49//error event passes error object to callback50this.on('error',function(error) {51//alert("播放出错！");52},this);53}54});55},56playPause :function() {57varaudio5js =this.options.audio5js;58if(audio5js.playing) {59audio5js.pause();60audio5js.volume(0);61}else{62audio5js.seek(0);//回到最开始的位置63audio5js.play();64audio5js.volume(1);65}66},67pause :function(){68varaudio5js =this.options.audio5js;69if(audio5js.playing) {70audio5js.pause();71audio5js.volume(0);72}73},74play :function(){75varaudio5js =this.options.audio5js;76if(!audio5js.playing) {77audio5js.play();78audio5js.volume(1);79}80},81getAudio5js :function(){82returnthis.options.audio5js;83}8485};86$.fn.audio5js =function(option, value) {87varmethodReturn;8889var$set =this.each(function() {90var$this= $(this);91vardata = $this.data('audio');92varoptions =typeofoption === 'object' &&option;93if(!data) {94$this.data('audio', (data =newAudio(this, options)));95}96if(typeofoption === 'string') {97methodReturn =data[option](value);98}99});100return(methodReturn === undefined) ?$set : methodReturn;101};102103$.fn.audio5js.defaults ={104url : "",//音频文件地址105title : "点击播放",106'class' : "audio",//正常样式class107playingClass : "audio-playing",//播放时样式class108audio5js : {}109};110111$.fn.audio5js.Constructor =Audio;112}(window.jQuery);
2、语音插件样式：jquery.audio5js.CSS
1/*播放样式*/2.audio{3cursor:pointer;4background:url("../images/voice.png") 0 -512px no-repeat;5width:60px;6height:60px;7vertical-align:middle;8display:inline-block;9}10.audio-playing{11cursor:pointer;12background:url("../images/voice.gif") 0 0 no-repeat;13width:60px;14height:60px;15vertical-align:middle;16display:inline-block;17}
3、案例页面：demo.html
1<!DOCTYPE html>2<html>3<head>4<title>Jquery Audio5js Demo</title>5<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">6<linkrel="stylesheet"href="css/jquery.audio5js.css"/>7<scripttype="text/javascript"src="https://cdnjscn.b0.upaiyun.com/libs/jquery/1.8.3/jquery.min.js"></script>8<scripttype="text/Javascript"src="https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5.min.js"></script>9<scripttype="text/javascript"src="js/jquery.audio5js.js"></script>10</head>1112<body>13标准案例：点击图片可以播放/暂停<
br/>14<spanid="voice1"></span>1516<
br/>17<
br/>18<
br/>19JS控制：<
br/>20<inputtype="button"value="播放/停止"onclick="$('#voice1').audio5js('playPause')"/>21<inputtype="button"value="播放"onclick="$('#voice1').audio5js('play')"/>22<inputtype="button"value="暂停"onclick="$('#voice1').audio5js('pause')"/>23<scripttype="text/javascript">24$(function(){25$("#voice1").audio5js({26url :"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)中才能见效果。