微信浏览器中音频自动播放

需求： 移动端微信浏览器+vue音频自动播放+ 翻页会有不同的BGM效果实现

实现：

• 第一步： <audio preload></audio>
  音频需要预加载，不然第二个音频有可能不会自动播放
• 第二步： 需要自动播放的BGM要写在App.vue里，同时用<keep-alive>写成动态组件，存在内存里
  。
  此时app.vue内的构造：

<keep-alive>
   <div>
      <audio :src="require('./assets/music/music.mp3')" preload loop  id="music"></audio>
      <audio :src="require('./assets/music/finish.mp3')" preload  id="finishMusic"></audio>
   </div>
</keep-alive>

• 第三步： App.vue的 <script> 标签内写入如下内容。这一步是为音频可以在切换页面的时候会自动播放，不写的话第一次的页面跳转没声音。

    let audio = document.getElementById('music')
    let music = document.getElementById('finishMusic')
    document.addEventListener('WeixinJSBridgeReady', function () {
      audio.load()
      music.load()
    }, false)

• 第四步： 在微信wx.ready（）事件中播放设置音乐播放

let music = document.getElementById('music') 
music.play()

附加：

1. 音乐暂停： music.pause()
2. 音乐重新播放：

music.currentTime = 0 // 回到起点 
music.play()

3. 音乐播放完成事件： music.onended = function() {}