小编给大家分享一下h5如何自定义audio，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站客户idc服务中心，提供光华机房服务器托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心，我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务，资深网络工程师在机房提供7*24小时标准级技术保障。
h6活动需要插入音频，但又需要自定义样式，于是自己写咯
html
css
/* 进度条 */
.range {
width: 5.875rem;
height: 0.15rem;
background: #2386e4;
border-radius: 0.25rem;
-webkit-appearance: none !important;
position: absolute;
top: 3.55rem;
left: 6rem;
}
/* 进度滑块 */
.range::-webkit-slider-thumb {
width: 0.5rem;
height: 0.5rem;
background: #fff;
border: 1px solid #f18900;
cursor: pointer;
border-radius: 0.25rem;
-webkit-appearance: none !important;
}js
//将秒数转为00:00格式
function timeToStr(time) {
var m = 0,
s = 0,
_m = '00',
_s = '00';
time = Math.floor(time % 3600);
m = Math.floor(time / 60);
s = Math.floor(time % 60);
_s = s < 10 ? '0' + s : s + '';
_m = m < 10 ? '0' + m : m + '';
return _m + ":" + _s;
}
//触发播放事件
$('.play').on('click',function(){
var audio=document.getElementById('ao');
audio.play();
setInterval(function(){
var t=parseInt(audio.currentTime);
$(".range").attr({'max':751});
$('.max').html(timeToStr(751));
$(".range").val(t);
$('.cur').text(timeToStr(t));
},1000);
});
//监听滑块，可以拖动
$(".range").on('change',function(){
document.getElementById('ao').currentTime=this.value;$(".range").val(this.value);
});以上是“h5如何自定义audio”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享文章：h5如何自定义audio
浏览地址：
http://bjjierui.cn/article/iihoge.html
