事情手记之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。

    原文作者:冷星
    原文地址: https://segmentfault.com/a/1190000007864808
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞