部分设备在微信内无法播放audio的解决方案

临时接到一个紧急的需求，一个活动页面，在某台iPhone 5S设备上无法播放音频，其它设备均正常。我接到这个任务时，也是一脸懵逼，试过在audio标签上添加controls属性来显示audio，结果发现在界面触发事情里，无计怎么调用audio对象的play方法都没有用，但是一旦激活audio标签后，就可以调用play、pause方法 - -

 

最后搜索了一下，找到一个解决方案：

function audioAutoPlay(id){
    var audio = document.getElementById(id);

    var play = function() {
        document.removeEventListener("WeixinJSBridgeReady", play);
        document.removeEventListener("YixinJSBridgeReady", play);

        audio.play();
        audio.pause();
        // document.removeEventListener("touchstart", play, false);
    };
    
    audio.play();
    audio.pause();

    //weixin
    document.addEventListener("WeixinJSBridgeReady", play, false);
    //yixin
    document.addEventListener('YixinJSBridgeReady', play, false);

    // document.addEventListener("touchstart", play, false);
}
audioAutoPlay('audio1');

 

有需要的同学自取吧，我尝试过，必须要在WeixinJSBridgeReady的回调中调用play方法才会激活audio对象，否则之后再调用play无效。搞前端就是这么蛋疼，后端就没有这么蛋疼的事儿了… 

 

参考：解决ios下的微信打开的页面背景音乐无法自动播放