安卓与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.click()
}
  
const playMusic = () => {
	if (!_isWeixinJSBridgeReady && /MicroMessenger/.test(window.navigator.userAgent)) {
		document.addEventListener('WeixinJSBridgeReady', () => {
        	initMusic()
		}, false)
    } else {
		initMusic()
    }
}

以下是自己封装好的音频播放，可以参考参考

// MusicPlayer.js
var _audio
var _isWeixinJSBridgeReady = false
document.addEventListener('WeixinJSBridgeReady', () => {
  _isWeixinJSBridgeReady = true
  _audio = new Audio()
  _audio.style.display = 'none'
  _audio.src = 'empty.mp3'
  _audio.play()
}, false)

var style = document.createElement('style')
style.setAttribute('role', 'm-sdk-MusicPlayer')
style.innerHTML = `
.m-sdk-music-player.play[mode="rotate"],
.m-sdk-music-player.play[mode="reset"] {
    animation: music-rotate 8s linear infinite;
    -webkit-animation: music-rotate 8s linear infinite;
}
.m-sdk-music-player.pause[mode="rotate"],
.m-sdk-music-player.pause[mode="reset"] {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.m-sdk-music-player__play,
.m-sdk-music-player__pause {
  display: none;
  width: 100%;
  height: 100%;
}
.m-sdk-music-player.play .m-sdk-music-player__play,
.m-sdk-music-player[mode="rotate"].play .m-sdk-music-player__pause,
.m-sdk-music-player[mode="reset"] .m-sdk-music-player__pause,
.m-sdk-music-player.pause .m-sdk-music-player__pause {
  display: block;
}
.m-sdk-music-player.play[mode="replace"] .m-sdk-music-player__pause {
  display: none;
}
@keyframes music-rotate {
  0%{
    transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  100%{
    transform: rotate(1turn);
    -webkit-transform: rotate(1turn);
  }
}
`
document.querySelector('head').appendChild(style)
/**
 * @param {object} options 参数表列
 * el 所要挂载的元素
 * src 链接地址
 * mode 模式 rotate旋转，reset暂停则复位，replace图标切换
 * loop 是否循环 false
 * icon 图标链接路径
 * playIcon 播放时的图标路径
 * isAutoPlay 是否默认播放 true
 */
function MusicPlayer(options) {
  this.config = Object.assign({}, options)
  this.isUserPaused = false
  if (typeof options.el === 'string') {
    this._view = document.querySelector(options.el)
  } else if (options.el instanceof HTMLElement) {
    this._view = options.el
  }
  this._view.classList.add('m-sdk-music-player', 'pause')
  // this._view.setAttribute('mode', 'rotate')
  // this._view.setAttribute('mode', 'reset')
  // this._view.setAttribute('mode', 'replace')
  this._view.setAttribute('mode', options.mode || 'rotate')

  this.src = options.src

  var _player = _audio || new Audio()
  _player.loop = options.loop || false
  _player.src = this.src

  var pauseIcon = new Image()
  pauseIcon.src = options.icon
  pauseIcon.classList.add('m-sdk-music-player__pause')
  this._view.appendChild(pauseIcon)

  if (options.mode === 'replace' && options.playIcon) {
    var playIcon = new Image()
    playIcon.src = options.playIcon
    playIcon.classList.add('m-sdk-music-player__play')
    this._view.appendChild(playIcon)
  }

  this._view.addEventListener('click', () => {
    if (this.paused) {
      this.play()
    } else {
      this.pause()
    }
    this.isUserPaused = !this.paused
  })
  _player.onplay = () => {
    this._view.classList.remove('pause')
    this._view.classList.add('play')
  }
  _player.onpause = () => {
    if (options.mode === 'reset' || options.mode === 'replace') {
      this._view.classList.remove('play')
    }
    this._view.classList.add('pause')
  }

  var initMusic = () => {
    var setInitMuisc = () => {
      _player.play()

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

    document.body.click()
  }

  if (options.isAutoPlay === undefined || options.isAutoPlay) {
    if (!_isWeixinJSBridgeReady && /MicroMessenger/.test(window.navigator.userAgent)) {
      document.addEventListener('WeixinJSBridgeReady', () => {
        initMusic()
      }, false)
    } else {
      initMusic()
    }
  }

  this.play = function() {
    _player.play()
  }

  this.pause = function() {
    _player.pause()
  }

  this.replay = function() {
    _player.replay()
  }

  Object.defineProperty(this, 'currentTime', {
    get: function() {
      return this._audio && this._audio.currentTime || 0 
    }
  })

  Object.defineProperty(this, 'paused', {
    get: function() {
      return this._audio && this._audio.paused
    }
  })
}

MusicPlayer.prototype.create = function(opt) {
  return new MusicPlayer(opt)
}

export default MusicPlayer

使用方法

import MusicPlayer from 'MusicPlayer'
const player = new MusicPlayer({
	src: 'bgm.mp3'
})