微信浏览器音频自动播放

8,146 阅读1分钟

前言

复盘了一下,微信内置浏览器音频自动播放的问题。

先说结果吧,使用 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 自动播放:

webAudio.png

<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> 自动播放:

audio.png

结论

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

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

如果大家有更好的解决方案,可以评论区见~