HTML5中audio标签的样式修改
由于html5的流⾏，现在移动端⼤多数的需求都可以使⽤audio来播放⾳频，但您可能只是需要很简单的播放/停⽌效果，但不同的浏览器上的audio样式却不尽⼈意，那么要怎么改变这个样式呢，其实它的原理⽐较简单，就是把写audio的时候不要⽤controls属性，隐藏原⽣的audio，然后⽤div之类标签，定义css样式美化起来⽤来显⽰播放器的效果，最后⽤js捕获audio事件，基本就是src路径、pause暂停、load 加载、play播放这些。下⾯是audio标签的⼀些相关API：
控制函数功能说明
1. load()：加载⾳频、视频软件，通常不必调⽤，除⾮是动态⽣成的元素，⽤来在播放前预加载
2. play()：加载并播放⾳频、视频⽂件，除⾮⽂件已经暂停在其他位置，否则默认重头开始播放
3. pause()：暂停处于播放状态的⾳频、视频⽂件
audio 可脚本控制的特性值：
jquery修改html内容1. src：⾳频⽂件路径。
2. autoplay：设置⾳频是否⾃动播放（默认有此属性为⾃动播放已经加载的的媒体⽂件），或查询是否已设置为autoplay
3. autobuffer：设置是否在页⾯加载时⾃动缓冲⾳频，如果设置了autoplay，则忽略此特性
4. loop：设置⾳频是否要循环播放。，或查询是否已设置为loop
5. currentTime：以s为单位返回从开始播放到⽬前所花的时间，也可设置currentTime的值来跳转到特定位置
6. controls：显⽰或者隐藏⽤户控制界⾯（属性供添加播放、暂停和⾳量控件。）
7. volume：在0.0到1.0间设置⾳量值，或查询当前⾳量值
8. muted：设置是否静⾳
只读属性属性说明
1. duration：获取媒体⽂件的播放时长，以s为单位，如果⽆法获取，则为NaN
2. paused：如果媒体⽂件被暂停，则返回true，否则返回false
3. ended：如果媒体⽂件播放完毕，则返回true
4. startTime：返回起始播放时间，⼀般是0.0，除⾮是缓冲过的媒体⽂件，并⼀部分内容已经不在缓冲区
5. error：在发⽣了错误后返回的错误代码
6. currentSrc：以字符串形式返回正在播放或已加载的⽂件，对应于浏览器在source元素中选择的⽂件
  对于这些属性，主流的浏览器都⽀持。可是别以为就没有了兼容性，在⾳频播放流中，有两个阵营。firefox 和 opera ⽀持 ogg ⾳
频，safari 和 ie ⽀持 mp3。幸好Google的chrome都⽀持。
<!--HTML：-->
<div class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg"/></audio></div>
<script type="text/javascript" src="apps.bdimg/libs/jquery/1.10.0/jquery.min.js"></script>
<!--CSS：-->
<style>
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;
}
</style>
<!--JavaScripy：-->
<script type="text/javascript">
$(function(){
//播放完毕
$('#mp3Btn').on('ended', function() {
console.log("⾳频已播放完成");
$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
})
//播放器控制
var audio = ElementById('mp3Btn');
audio.volume = .3;
$('.btn-audio').click(function() {
event.stopPropagation();//防⽌冒泡
if(audio.paused){ //如果当前是暂停状态
$('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
audio.play(); //播放
return;
}else{//当前是播放状态
$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
audio.pause(); //暂停
}
});
})
</script>
通过以上⽅法，audio的样式修改的问题就解决啦，你可以换成你想要的显⽰效果。