audio在H5中的坑
获取audio音频对音频进行计算播放时间计算时间进度条控制audio存在的坑
你好！ 这是你第一次使用
Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
获取audio音频对音频进行计算播放时间
function setTimeShow(t
) {
t
= Math
.floor(t
);
var playTime
= secondToMin(audio
.currentTime
);
console
.log(playTime
)
$(".size").text(playTime
);
$('.timeshow').text(secondToMin(audio
.duration
))
console
.log(audio
);
$('.timeline').children().css({
width
: (t
/ audio
.duration
).toFixed(4) * 100 + "%"
})
}
计算时间
function secondToMin(s
) {
var MM = Math
.floor(s
/ 60);
var SS = s
% 60;
if (MM < 10)
MM = "0" + MM;
if (SS < 10)
SS = "0" + SS;
var min
= MM + ":" + SS;
return min
.split('.')[0];
}
进度条控制
$(document
).on('touchend', '.timeline', function(e
) {
var x
= e
.originalEvent
.changedTouches
[0].clientX
- this.offsetLeft
;
var X = x
< 0 ? 0 : x
;
var W = $(this).width();
var place
= X > W ? W : X;
audio
.currentTime
= (place
/ W).toFixed(2) * audio
.duration
$(this).children().css({
width
: (place
/ W).toFixed(2) * 100 + "%"
})
});
audio存在的坑
audio标签在PC显示正常，兼容性良好，在H5就存在一系列的问题。 1）样式问题，在h5中安卓机和ios系统下的样式显示有明显的区别。
2）ios会忽视autoplay属性，原因据是因为流量问题，苹果认为不让用户确认就下载音频文件会引起流量问题，所以禁止了这个功能，除了ios,高版本的安卓(5.0)部分机器也存在这个问题，为了绕开这个功能必须要做一些处理： 苹果手机上，一般是无法自动播放的所以我们一般是进行添加按钮，加上点击事件
3）如果自定义标签中存在下一首上一首的话，则可以需要点击后再点击播放才会进行获取音频数据，更新音频时长和播放音乐。具体播放按钮代码参照可参照为：
$(".play").click(function(){
audio
.play()
time1
=setInterval(function(){
var currentTime
= audio
.currentTime
;
if(typeof currentTime
== 'number'){
setTimeShow(currentTime
);
}
}, 500);
})
4）特别要注意的是audio标签的生命周期函数： loadstart开始加载， durationchange时长改变， loadedmetadata元数据加载完毕， loadeddata数据开始加载， progress加载中， canplay可以播放， canplaythrough可以播放整个音频 在ios中无法生效。 5）个人分析和案例还是不能完全的能解析透彻audio标签，网上找到了一个比较类似的案例分析 HTML5报错Uncaught (in promise) DOMException解决方法
