【记录】微信下自动播放音频的解决方案

最近做柜子的项目，需求要求用户用微信扫一扫扫柜子二维码，H5页面跳转到首页打开柜门的同时播放柜门已打开的语音。

方案一：文字转语音 Web Speech API

Web Speech API 能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

但是，此方法在安卓微信上不可用！

方案二：howler.js

howler.js是一个适用于现代网络的音频库。它默认使用Web Audio API，并可回退到HTML5 Audio。这使得使用 JavaScript 处理音频在所有平台上都变得简单而可靠。

<script>
import { Howl } from 'howler'
export default {
   mounted () {
    const soundBgm = new Howl({
      src: ['音频'], // 提供多个格式
      autoplay: true,
      loop: false,
      volume: 1,
      preload: true,
      mute: true,
      onplay: function () {
        console.log('播放')
      },
      onpause: function () {
        console.log('暂停')
      },
      onstop: function () {
        console.log('停止')
      }
    })
    soundBgm.play()
  }
}
</script>

方案三：audio标签

<audio ref="audio" id="bookAudio" autoplay>
    <source :src="music" type="audio/mpeg" />
</audio>

由于IOS、Android和微信自带的浏览器不允许自动播放audio和video，记录下我如何解决。

1、触摸监听

原理是当用户触碰到屏幕就开始播放音频，以达到看起来好像是自动播放的假象。如果用户不触碰，则不会播放。

document.addEventListener('touchstart', function() {
    document.getElementById('bookAudio').play()
    // 或者
    soundBgm.play()
})

2、微信浏览器：WeixinJSBridgeReady

微信的内置浏览器内置了 WeixinJSBridgeReady 事件，可以兼容大部分的移动设备。

document.addEventListener('WeixinJSBridgeReady', () => {
    document.getElementById('bookAudio').play()
    // 或者
    soundBgm.play()
}, false)