h5活动需要插入音频，但又需要自定义样式，于是自己写咯

html

XML/HTML Code复制内容到剪贴板 <> <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(问题及解决)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。

【浅谈h5自定义audio(问题及解决)】相关文章：

★ 纯HTML5+CSS3制作生日蛋糕(代码易懂)

★ 浅谈HTML5新增及移除的元素

★ html5 canvas fillRect坐标和大小的问题解决方法

★ 关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法

★ HTML5 canvas基本绘图之绘制曲线

★ HTML5 Video标签的属性、方法和事件汇总介绍

★ 浅谈html5增强的页面元素

★ HTML5 Notification（桌面提醒）功能使用实例

★ 浅谈Html5中视频 音频标签 进度条的问题

★ 浅谈html5标签css3的常用样式