移动端H5音频播放问题

最近由于新产品需求,需要在移动端打开H5页面,并且能够进行音频自动播放,在开发过程中遇到了如下几种问题:
1.IOS设备不能响应“loadeddata”事件

//方式1
var audio = new Audio(src);
audio.addEventListener("loadeddata", function() {
    audio.play();
    //开始播放状态处理
});

//方式2
var audio = new Audio(src);
audio.play();

经过测试,以上方式1在IOS设备中不会进行播放,方式2可以正常播放,这个过程中在处理音频加载过度效果会遇到问题,不知道什么时候音频加载完成,并且开始播放,解决方案如下:

var playerHandle = setInterval(function() {

    if(audio.currentTime > 0 &&!isNaN(audio.duration)) {
        //已经开始播放,处理相应逻辑
        clearInterval(playerHandle);        
    }
}, 0)

这里还有一点需要注意的是,如果需要自己控制播放进度,音频的时长audio.duration必须在开始播放,即audio.currentTime > 0时获取,否则会不准确。
2.H5页面加载完毕后不能进行自动播放,设置autoplay属性、audio标签添加click事件等方式都不行,原因是由于移动端webview有安全限制,禁止自动播放等一些不可控行为,必须由用户触发touch,才可以进行播放,最后这个问题是由移动端小伙伴解决:客户端设置了一个安全相关的属性实现音频自动播放。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值