那浓雾，抓一把，软绵绵；吸一口，甜津津；踩一脚，轻悠悠。既然都是风景，何必纠结与下不去的站，互不干扰，各自安好。
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(问题及解决)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。