微信浏览器自动播放音乐

学习自

https://juejin.cn/post/7113805660667510798

<!-- 引入此js -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="static/howler.min.js"></script>
<script>
			const soundBgm = new Howl({
			  src: ['static/mp3.mp3'],
			  loop: true,
			  preload: true,
			})
			soundBgm.on('load',()=>{
			  window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {},  ()=> {
			    play()
			    // DomClass.style.animationPlayState = ''
			  }, false);
			})
</script>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓以下是抄的上面大佬的原话,害怕原链接失效,再此记录↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

先说结果吧，使用 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 似乎是最好的解决方案。