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; b祛痰偏方ackground:#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(); tinterval(function(){ vart=parint(audio.currenttime); $(“.range”).attr({‘max’:751}); $(‘.max’).html(timetostr(75优美开头结尾摘抄大全1)); $(“.range”).val(t); $(‘.cur’).text(timetostr(t)); },1000); }); //监听滑块，可以拖动 $(“.range”).on(肉肉的文章216;change’,function(){ document.getelementbyid(‘ao山东单招网’).currenttime=this.value;$(“.range”).val(this.value); });以上基本可以实现自定义音频播放，但是在拖动进度条的时候出现了问题，电脑上是ok的，但是在手机上可以拖动，只不过音频的总时长比正常播放少了好几分钟，导致拖动进度后播放不准确。通过测试发现手机上拿到的duration（总时长）跟电脑上不一样，导致滑动后播放位置不准确。究其原因发现因为上传的音频被我压缩了，所以在手机上拿到的duration就跟正常的不一样。所以音频经过压缩后在手机上其duration就会变（电脑上不会），以后要注意。如果有什么既可以压缩音频也可以在手机上拿到正常duration的方法，麻烦告知小弟，哈哈。
关于这篇浅谈h5自定义audio(问题及解决)就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。
