微信内置浏览器音频自动播放的问题。

先说结果吧，使用 Web Audio，Android 与 IOS 均可以自动播放。使用<audio>，IOS 可以自动播放，Android 无法自动播放。

如果大家有更好的解决方案，或者以上结论失效，可以在评论区一起探讨。

Web Audio 自动播放

目前来看，使用 Web Audio 是微信音频自动播放，最合适的兼容方案。

实现方式

这里使用 howler.js 作为 Web Audio API 的简化语法来展现实现逻辑：

import {Howl, Howler} from 'howler'; import assetsBgm from './assets/bgm.mp3'; // Web Audio 初始化 const soundBgm = new Howl({ src: [assetsBgm], loop: true, preload: true,
}) // 音频资源 load 之后通过微信桥接触发播放 soundBgm.on('load',()=>{ window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, ()=> {
    soundBgm.play();
  }, false);
}) 复制代码

demo

扫码测试 Web Audio 自动播放：

<audio>自动播放

经过测试<audio>IOS 端可以自动播放，Android 需要在点击后触发才可以自动播放。

实现方式

相关实现方式如下：

<audio src="./assets/bgm.mp3" id="audio" loop controls></audio> 复制代码

const elementAudio = document.getElementById('audio'); window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
  elementAudio.play();
}, false); 复制代码

demo

扫码测试<audio>自动播放：

结论

微信环境内音频自动播放，主要通过WeixinJSBridge来触发，除了文中的方式，网上还有其它更多的解决方案，但原理都是通过 Bridge 调用原生封装的方法。

相比<audio>安卓端无法自动播放，Web Audio 似乎是最好的解决方案。