Vue 爬坑之旅 -- 给页面加上背景音乐并直接播放

在很多的 H5 推广或者宣传页面都有背景音乐，并且基本上进入页面后背景音乐都是自动播放的，最近我也接到了这么一个需求（虽然我觉得这个需求很 Low，没什么必要，但架不住 PM 的硬性要求）。

要想在页面上播放背景音乐其实很简单，只需要一个 audio 标签即可，基本用法如下：

<audio ref="audio" src="https://img.youpenglai.com/penglai/1.mp3" loop preload="auto"></audio>

理论上在页面上加入上面的标签就可以实现在页面上自动循环播放你想要的背景音乐，但是当在手机浏览器和微信内打开时会发现，音乐根本就没有自动播放。在查阅了一些资料之后，找到了以下的代码，经测试后发现功能正常可用。代码如下：

<template>
  <div class="page-promotion flex-col">
    <div class="con-play flex" @click="audioPlayOrPause()">
      <img v-show="playFlag" class="audio-on" src="../assets/img/promotion/ic_sound_on.svg" alt="">
      <img v-show="!playFlag" class="audio-off" src="../assets/img/promotion/ic_sound_off.svg" alt="">
    </div>
    
    <audio ref="audio" src="https://img.youpenglai.com/penglai/1.mp3" autoplay loop preload="auto"></audio>
  </div>
</template>

<script>
  export default {
    name: 'Promotion',
    data () {
      return {
        playFlag: true,
        clickMusicBtn: false,
      }
    },
    
    async mounted () {
      this.audioAutoPlay()
      document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q
        if (this.clickMusicBtn) { // 点击了关闭音乐按钮
          if (this.playFlag) {
            this.audioAutoPlay();
            this.playFlag = true;
          } else {
            this.audioPause();
            this.playFlag = false;
          }
      
          text.innerHTML = e.hidden;
          if (e.hidden) {  // 网页被挂起
            this.audioAutoPlay();
            this.playFlag = true;
          } else { // 网页被呼起
            this.audioPause();
            this.playFlag = false;
          }
        } else { // 未点击关闭音乐按钮
          if (this.playFlag) {
            this.audioPause();
            this.playFlag = false;
          } else {
            this.audioAutoPlay();
            this.playFlag = true;
          }
      
          text.innerHTML = e.hidden;
          if (e.hidden) {  // 网页被挂起
            this.audioPause();
            this.playFlag = false;
          } else { // 网页被呼起
            this.audioAutoPlay();
            this.playFlag = true;
          }
        }
      });
    },
    
    methods: {
      audioPlayOrPause() {
        this.clickMusicBtn = !this.clickMusicBtn;
        if (this.playFlag) {
          this.audioPause();
          this.playFlag = false;
        } else {
          this.audioAutoPlay();
          this.playFlag = true;
        }
      },
      audioPause() {
        let audio = this.$refs.audio
        audio.pause();
        document.addEventListener("WeixinJSBridgeReady", function () {
          audio.pause();
        }, false);
      },
      audioAutoPlay() {
        let audio = this.$refs.audio
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
          audio.play();
        }, false);
      },
    },
  }
</script>

用上面的那些代码就可以在微信内实现背景音乐自动播放功能，这里面有一点需要注意的就是 audio 的 src 属性，这里可以放线上资源的地址，也可以放本地资源的路径。推荐使用线上资源地址，而且注意控制下资源文件的大小。
vue-cli3 项目，如果通过相对路径引用资源则会经过 webpack 打包，相反，如果通过绝对路径引用则不会经过 webpack 处理，注意这里资源的绝对路径不是 /public/xxx 而是直接填 public 里的路径，官方文档没有例子说这件事。
而且还要注意资源在服务器上的目录层级，因为有时候项目发到服务器上后，目录层级可能会和我们本地的有点不一样，这时候资源路径也会有问题，需要跟服务器那边协调好。