ios端微信浏览器中自动播放HTML5的audio问题

前言

方法一：JS-SDK

核心原理: 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理)

引入文件后，首先通过wx.config接口注入权限验证配置，然后在ready中play一下audio。

<!--  当使用方法1时必须加载 JS-SDK 的 JS 文件  -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>
   function autoPlayAudio1() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
           let audio = document.createElement('audio'); //生成一个audio元素 
           audio.src = 'https://freetyst.nf.migu.cn/public/product08/2018/03/06/2012%E5%B9%B402%E6%9C%8820%E6%97%A5%E6%B5%B7%E8%9D%B6%E5%86%85%E5%AE%B9%E5%87%86%E5%85%A59%E9%A6%96/%E5%85%A8%E6%9B%B2%E8%AF%95%E5%90%AC/Mp3_64_22_16/%E5%BA%90%E5%B7%9E%E6%9C%88-%E8%AE%B8%E5%B5%A9.mp3';
           audio.play();   // 自动播放
        });
    }
</script>

vue-cli 脚手架代码：

router.afterEach((to, from, next) => {
    let wx = Vue.prototype.$wechat;
    let _url = window.location.href.split('#')[0];
    // 使用JS-SDK的页面必须先注入配置信息
    Vue.prototype.$http('/mobile/wechat/jsconfig?url=' + encodeURIComponent(_url)).then(res => {
      if (res.status) {
        // 注入配置
        Vue.prototype.$wechat.initConfig(res.data);
      }
    })
    wx.ready(() => {
      let audio = document.createElement('audio'); // 生成一个audio元素 
      audio.src = 'https://freetyst.nf.migu.cn/public/product08/2018/03/06/2012%E5%B9%B402%E6%9C%8820%E6%97%A5%E6%B5%B7%E8%9D%B6%E5%86%85%E5%AE%B9%E5%87%86%E5%85%A59%E9%A6%96/%E5%85%A8%E6%9B%B2%E8%AF%95%E5%90%AC/Mp3_64_22_16/%E5%BA%90%E5%B7%9E%E6%9C%88-%E8%AE%B8%E5%B5%A9.mp3';
      audio.play(); // 自动播放
   })
})

注意事项：

1、wx.ready 好像一定要放在main.js中的wx.config()之后执行

方法二：WeixinJSBridge.invoke

以前用的是WeixinJSBridge.invoke方法，绑定getNetworkType事件，返回中拿到网络信息，然后在根据网络信息是wifi还是4G等来播放音频。

mounted() {
    alert(typeof WeixinJSBridge);
    WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
    alert(e.err_msg); // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
    let audio = document.createElement('audio'); //生成一个audio元素
    audio.src = 'https://freetyst.nf.migu.cn/public/product08/2018/03/06/2012%E5%B9%B402%E6%9C%8820%E6%97%A5%E6%B5%B7%E8%9D%B6%E5%86%85%E5%AE%B9%E5%87%86%E5%85%A59%E9%A6%96/%E5%85%A8%E6%9B%B2%E8%AF%95%E5%90%AC/Mp3_64_22_16/%E5%BA%90%E5%B7%9E%E6%9C%88-%E8%AE%B8%E5%B5%A9.mp3';
    // 自动播放
    audio.play();
    });
}