vue-cli3微信H5网页背景音乐自动播放

比较坑的代码

HTML部分

<audio loop id="media" autoplay preload>
  <source src="../assets/bg.mp3">
</audio>

JS部分

mounted() {
    wx.ready(function() {
      document.getElementById("media").play();
      document.getElementById("media").volume = 0.8;
    });
    document.addEventListener(
      "WeixinJSBridgeReady",
      function() {
        document.getElementById("media").play();
      },
      false
    );
    this.playing = true;
  }

以上代码在IOS端微信浏览器死活播放不出来，调试工具上可以，真机就不行了。。。

后面经过多方调试，发现并不是IOS和微信的锅，当然它们也造成了一些影响。

后来实在没办法了，猜想可能是

• 缓存机制问题
• 资源延迟引用的问题
• 打包之后的路径问题

试了一下这样的引用方式：
HTML部分

<audio loop id="media" autoplay preload>
  <source :src="audioSrc">
</audio>

JS部分,改成require引入

data() {
    return {
      audioSrc: require('../assets/bg.mp3'),
    };
  },
mounted() {
    wx.ready(function() {
      document.getElementById("media").play();
      document.getElementById("media").volume = 0.8;
    });
    document.addEventListener(
      "WeixinJSBridgeReady",
      function() {
        document.getElementById("media").play();
      },
      false
    );
  }

OK,居然成功了，我也是醉了。