H5的audio在ios系统的微信上不能自动播放的问题

huangsh

前几天有个需求,要在H5页面中添加背景音乐,本以为很easy,却也踩了一些坑,废话不多说,进入正题:
撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在iphone里的微信和safari中不能播放!

查了很多资料,原来是微信的锅,微信的js api是建立在微信内置浏览器的私有对象WeixinJSBridge上,在微信中打开页面的话会初始化这个对象,当这个对象准备好的时候,会抛出WeixinJSBridgeReady这个事件,我们在这个事件的回调中可以播放音乐,直接上代码:

*html*

     <audio id="bg-audio" src="bg.mp3" loop="loop" autoplay="autoplay"></audio>

*js*

    var bgAudio = document.getElementById('bg-audio');
    bgAudio.load();
    bgAudio.play();
    // 兼容在微信里自动播放
    document.addEventListener("WeixinJSBridgeReady", function () {
        bgAudio.load();
        bgAudio.play();
    }, false);
    
阅读 6.7k

前端_风雨开发路
用心整理web前端开发过程中遇到的坑和绕过的弯,希望能帮助到茫茫人海中的你!

灵魂和皮囊能够握手言和,面子和里子能够始终如一。

258 声望
15 粉丝
0 条评论

灵魂和皮囊能够握手言和,面子和里子能够始终如一。

258 声望
15 粉丝
文章目录
宣传栏