今天小编跟大家讲解下有关浅谈h5自定义audio(问题及解决) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈h5自定义audio(问题及解决) 的相关资料，希望小伙伴们看了有所帮助。
h5活动需要插入音频，但又需要自定义样式，于是自己写咯
html
XML/HTML Code复制内容到剪贴板 <!--cur表示当前时间max表示总时长input表示进度条--> <spanclass='cur'></span><inputtype="range"min=0max=100class='range'value=0><spanclass='max'></span>css
CSS Code复制内容到剪贴板 .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:1pxsolid#f18900; cursor:pointer; border-radius:0.25rem; -webkit-appearance:none!important; }js
Javascript Code复制内容到剪贴板 //将秒数转为00:00格式 functiontimeToStr(time){ varm=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(){ varaudio=document.getElementById('ao'); audio.play(); setInterval(function(){ vart=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); });以上基本可以实现自定义音频播放，但是在拖动进度条的时候出现了问题，电脑上是ok的，但是在手机上可以拖动，只不过音频的总时长比正常播放少了好几分钟，导致拖动进度后播放不准确。通过测试发现手机上拿到的duration（总时长）跟电脑上不一样，导致滑动后播放位置不准确。究其原因发现因为上传的音频被我压缩了，所以在手机上拿到的duration就跟正常的不一样。所以音频经过压缩后在手机上其duration就会变（电脑上不会），以后要注意。如果有什么既可以压缩音频也可以在手机上拿到正常duration的方法，麻烦告知小弟，哈哈。
关于这篇浅谈h5自定义audio(问题及解决)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持爱蒂网。
来源：爱蒂网
