需求： 移动端微信浏览器+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()
附加：
- 音乐暂停：
music.pause()
- 音乐重新播放：
music.currentTime = 0 // 回到起点
music.play()
- 音乐播放完成事件：
music.onended = function() {}
