本文摘自PHP中文网,作者不言,侵删。
下面为大家带来一篇浅谈h5自定义audio(问题及解决)。内容挺不错的,现在就分享给大家,也给大家做个参考。h5活动需要插入音频,但又需要自定义样式,于是自己写咯
html
1 2 | < span class = 'cur' ></ span >< input type = "range" min = 0 max = 100 class = 'range' value = 0 >< span class = 'max' ></ span >
|
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .range {
width : 5.875 rem;
height : 0.15 rem;
background : #2386e4 ;
border-radius: 0.25 rem;
-webkit-appearance: none !important ;
position : absolute ;
top : 3.55 rem;
left : 6 rem;
}
.range::-webkit-slider-thumb {
width : 0.5 rem;
height : 0.5 rem;
background : #fff ;
border : 1px solid #f18900 ;
cursor : pointer ;
border-radius: 0.25 rem;
-webkit-appearance: none !important ;
}
|
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function timeToStr(time) {
var m = 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 (){
var audio=document.getElementById( 'ao' );
audio.play();
setInterval( function (){
var t=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的方法,麻烦告知小弟,哈哈。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
H5横竖屏检测的方法
以上就是h5自定义audio的解析的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5 video/audio播放本地文件
html5规定元素的上下文菜单属性contextmenu
html5中关于div与span html块级元素的详细介绍
html5 dialog使用详解
html5画布的详细介绍
h5是什么
html5 video 视频标签使用介绍
html5加载时的等待动画效果制作
html5的地理定位如何使用
h5表单介绍和表单验证失败问题实例
更多相关阅读请进入《h5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » h5自定义audio的解析