H5自动播放背景音乐（IOS和安卓）

最新推荐文章于 2023-06-27 18:55:39 发布

原创

最新推荐文章于 2023-06-27 18:55:39 发布 · 2.9k 阅读

本文探讨了在安卓和iOS上实现H5背景音乐自动播放的方法。对于安卓设备，可以直接使用audio标签播放，而iOS则需利用微信事件。在有Loading页的场景下，iOS因自动播放依赖特定事件，可能导致无法自动播放，解决方案是在加载结束时先播放空音频，再启动背景音乐。提供了一种音频播放的封装实现供参考。

安卓与IOS播放

安卓可以直接使用audio标签进行播放

<audio
	ref="sound"
	:src="bgm.mp3"
	loop />

const audio = document.querySelector('audio')
audio.play()

IOS端需要借助微信自带的事件进行播放

const audio = document.querySelector('audio')
document.addEventListener('WeixinJSBridgeReady', () => {
   
   
	audio.play()
}, false)

其他app客户端直接同安卓端一样直接播放
浏览器app部分可能不支持自动播放

安卓与IOS兼容

有Loading页，需要在Loading页之后播放背景音乐时，IOS端依旧无法自动播放，因为自动播放音频依托于微信的WeixinJSBridgeReady的事件，WeixinJSBridgeReady通常发生很快，在Loading页结束之前已经发生，此时可以在WeixinJSBridgeReady时播放一段空音频，等待Loading结束，再播放bgm。

var _audio
var _isWeixinJSBridgeReady = false
document.addEventListener('WeixinJSBridgeReady', () => {
   
   
  _isWeixinJSBridgeReady = true
  _audio = new Audio()
  _audio.style.display = 'none'
  // 播放空音频
  _audio.src = 'empty.mp3'
  _audio.play()
}, false)

const initMusic = () => {
   
   
	var setInitMuisc = () => {
   
   
		// 播放背景音乐
		_audio.src = 'bgm.mp3'
		_audio.play()

		document.removeEventListener('click', setInitMuisc)
		document.removeEventListener('touchstart', setInitMuisc)
    }
	document.addEventListener('click', setInitMuisc)
    document.addEventListener('touchstart', setInitMuisc)
    document.body.