微信中播放 H5 页面中的音频

<div id="audio-btn" class="rotate">
  <!-- <audio src="images/bg.mp3?v=3" id="media" autoplay preload loop> -->
  <audio id="media" autoplay preload loop>
    <source src="https://xxx.com/images/bg.mp3" type="audio/mpeg" />
  </audio>
  <!-- <audio src="images/shake.mp3" id="mediaa" preload loop></audio> -->
  <audio id="mediaa" preload loop>
    <source src="https://xxx.com/images/shake.mp3" type="audio/mpeg" />
  </audio>
</div>
<script>
    $(document).ready(function() {
        document.getElementById('media').play();
        document.addEventListener("WeixinJSBridgeReady",function(){
            WeixinJSBridge.invoke('getNetworkType',{},function(e){
                document.getElementById('media').play();
            });
        },false);
    }
    // 2. 手动控制音频的播放和停止
  var bgMusic = document.getElementById('media');
  $('#audio-btn').click(function(){
          if (bgMusic.paused) {
              $('#audio-btn').addClass('rotate');
              bgMusic.play();
          }else{
              $('#audio-btn').removeClass('rotate');
              bgMusic.pause();
          }
    });
</script>

## 微信切后台停止音频播放

```js
 onWXPageStateChange () {
    const that = this
    function onBridgeReady () {
      // eslint-disable-next-line no-undef
      WeixinJSBridge.on('onPageStateChange', function (res) {
        console.log('res is active', res.active)
        that.stopAll()
      })
    }

    if (typeof WeixinJSBridge === 'undefined') {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
      }
    } else {
      onBridgeReady()
    }
  }

处理返回按钮

window.history.pushState(null, null, '');
//window.onpopstate = function(event) {
// console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
//};

window.addEventListener('popstate', function(e) {
  window.history.pushState(null, null, '');
  alert('我被拦截了');
  // 弹窗内处理返回
  // 在弹窗点击时修改gobackstatus状态,防止二次弹窗
  // wx.miniProgram.navigateBack();
});