微信浏览器音频自动播放解决方案

文章介绍

目前遇到的问题就是，不像以前，现在微信内打开网页无法播放自带的音频文件，加了播放器有麻烦，甚至不美观，综合了一下，找到了两种解决方案

• 传统<audio>标签在安卓微信中无法自动播放
• WeixinJSBridge方案成功率最高（实测达98%）
• Web Audio方案兼容性最佳（支持iOS/Android）

1.Web Audio

Android 与 IOS 均可以自动播放

目前来看，使用 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);
})
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);
})
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);
})

2.Audio

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

相关实现方式如下：

<audio src="./assets/bgm.mp3" id="audio" loop controls></audio>
<audio src="./assets/bgm.mp3" id="audio" loop controls></audio>
<audio src="./assets/bgm.mp3" id="audio" loop controls></audio>

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

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

window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
  elementAudio.play();
}, false);

在微信环境中实现音频自动播放一直是开发者的痛点。目前最可靠的解决方案是通过WeixinJSBridge调用微信原生接口，结合Web Audio API实现跨平台兼容。

你在项目中用过哪种方案？ 欢迎在评论区分享你的实战经验！遇到自动播放问题也可以留言讨论，我会第一时间解答。