首先先简单介绍一下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
/**
使用方式：
如：
$("#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、案例页面：index.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)中才能见效果。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索文件
， class
， 浏览器
this
jetaudio播放器、audio 音频播放器样式、audio音乐播放器、jetaudio播放器中文版、audio 播放器，以便于您获取更多的相关知识。