由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio， 然后用p之类标签，定义css样式美化起来用来显示播放器的效果，最后用js捕获audio事件，基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关api：
控制函数功能说明
load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause()：暂停处于播放状态的音频、视频文件
audio 可脚本控制的特性值：
src：音频文件路径。
立即学习“前端免费学习笔记（深入）”；
autoplay：设置音频是否自动播放 （默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay
autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性
loop：设置音频是否要循环播放。，或查询是否已设置为loop
currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls： 显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。 ）
volume：在0.0到1.0间设置音量值，或查询当前音量值
主要更新介绍： 完美整合Discuz!论坛，实现一站式登陆、退出、注册； 同步所有会员资料； 新增购物车功能，商品购买更加方便、快捷； 新增部分快捷菜单，网站访问更加方便； 限制首页商品、店铺标题显示长度； 修正会员后台管理不能更改密码的错误； 完善商品显示页面所有功能链接； 修正后台标签管理部分错误； 修正前台学校列表不按后台顺序显示的错误； 修正搜索功能中学校名称过长导致显示紊乱的现象； 修正
muted：设置是否静音
只读属性属性说明
duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused：如果媒体文件被暂停，则返回true，否则返回false
ended：如果媒体文件播放完毕，则返回true
startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
error：在发生了错误后返回的错误代码
currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件
对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3。幸好Google的chrome都支持。
body{
background:#2b2938;
}
.btn-audio{
margin: 90px auto;
width: 186px;
height: 186px;
background:url(images/voice_stop.png) no-repeat center bottom;
background-size:cover;
}作为技术实现，它的原理比较简单，就是把原生的audio隐藏，然后用p来显示播放器的效果，然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取，有时不行，比较坑，所以建议在audio标签上自定义duration属性存放时长，这时，如果组件获取不到时会来取这个值。
this.settings.target.on('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor(_this.duration) + 's');
} else {
var attr = $(_this.settings.target).attr('duration');
if(attr){
_this.durationContent.html($(_this.settings.target).attr('duration')+"s");
}else{
_this.durationContent.html('');
}
}
}); 
