背景音乐audio在微信浏览器内自动播放

本文由清尘发表于2017-12-18 15:10属于javascript分类

在制作html5场景页面的时候,通常会插入一首背景音乐,在进入页面时自动播放。
常用代码:

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

上面的代码在PC网页以及安卓和大部分IOS机子的微信是可以自动播放的。 IOS自带的safari浏览器是禁止自动播放的,需要用户交互触发才可以播放,所以只能做用户触屏时触发播放了。

要在微信内浏览器自动播放音乐。可以使用微信的JS-SDK:

引入微信的JS-SDK:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

JS部分代码:

var audio= document.getElementById("audio");
wx.config({
    // 配置信息
});
wx.ready(function () {
    audio.play();
});

通过以上代码可以在微信浏览器内加载后就自动播放背景音乐。

另一种方法:在JS里监听微信JS-SDK的事件,进行播放:

var audio= document.getElementById("audio");
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
        // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
        // alert(res.err_msg);
        audio.play();
    });
}