浅谈h5自定义audio(问题及解决)
浅谈h5自定义audio(问题及解决)
发布时间:2016-12-27 来源:查字典编辑
摘要:h5活动需要插入音频,但又需要自定义样式,于是自己写咯htmlXML/HTMLCode复制内容到剪贴板cssCSSCode复制内容到剪贴板/...

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新HTML5教程学习
热门HTML5教程学习
网页设计子分类