脚本宝典收集整理的这篇文章主要介绍了

工作手记之ios safari禁止音频自动播放的解决方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

问题场景:

制作一个H5,需要微信打开后背景音乐或者其他音频文件进行播放,但是经常出现的结果是,安卓基本没有问题,但是苹果手机确不行,总是不进行播放,这是为什么呢?

问题原因:

苹果为了用户着想,禁止了Autoplay和JS "onload" 加载播放。

    User Control of Downloads Over Cellular Networks

    In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.

但是客户却是需要上述效果,那该如何解决呢?

解决方法:

方法一:(依赖touch事件进行播放,但是有时候用户并没有操作,此时就有点尴尬了……)

document.addEventListener('touchstart', function(){ 
    audio.play();
}, false);

方法二:(依赖微信的ready事件进行,但是只能解决微信内部,外部浏览器safari还是不行:(……)

document.addEventListener("WeixinJSBridgeReady", function () {
    audio.play();
}, false);

但是如果作品使用的场景基本基于微信的话,那是用方法二可以基本有效的解决这个问题
同时,当一个H5有多个音频时,可以在ready的callback里面重新load一遍,后面在适当的时机调用play就可以了,不然的话,依然会报出play方法undefined的error。

总结

以上是脚本宝典为你收集整理的

工作手记之ios safari禁止音频自动播放的解决方法

全部内容,希望文章能够帮你解决

工作手记之ios safari禁止音频自动播放的解决方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过