兼容微信的移动端自动播放音乐方案

大多数浏览器都禁用了自动播放音乐的功能，因为这可能会带来不好的用户体验以及更多的电池消耗。因此下面的代码是无法正常工作的：

此外，企图使用 audio 元素的 play 方法自动播放音乐，也是被禁止的：

const src = "./music.mp3";
const audio = new Audio();
audio.src = src;
audio.preload = "auto"
audio.play();

在 Chrome 中，上面的代码会抛出一个异常：

Uncaught (in promise) DOMException

对于音乐自动播放的解决方案，主要有两大类：

1. 使用 iframe
2. 借助事件

第一种方案通过借助 iframe 来进行音乐的自动播放，但我没有测试效果如何，可以参考这里。
借助事件的方案很简单，就是监听触摸事件，当第一次触摸发生后就播放音乐，这样就可以绕过浏览器的检测。但缺点是如果用户打开网站后一直不触摸屏幕，是不会自动播放音乐的。不过这样的例外很少，绝大多数用户打开页面后都会发生触摸动作的，是个很好的解决方案。如果要追求百分之百自动播放，不妨试试上面的 iframe 方案。

function autoPlay(src) {
  const audio = new Audio();
  // 该元素用来在页面上控制音乐的播放和暂停
  const musicEle = document.querySelector("#music")
  audio.src = src;
  audio.preload = "auto"
  let played = false;

  // 第一次触摸结束后开始播放音乐
  document.addEventListener("touchend", () => {
    if (played) return;
    if (audio.paused) {
      played = true;
      audio.play();
    }
  })

  // 控制音乐的播放和暂停
  musicEle.addEventListener("click", function () {
    if (audio.paused) {
      this.className = "on";
      audio.play();
    } else {
      this.className = "off"
      audio.pause();
    }
  })
}
autoPlay("./music.mp3");

但这个方案在微信中不太好用，在我的手机上测试的时候，使用微信打开页面并触摸不会自动播放音乐（IOS 12.1.2，微信版本 6.7.4），因此存在一些兼容性问题。
对于微信，可以通过 WeixinJSBridge 对象来实现这个功能，微信自带的浏览器提供了一个 WeixinJSBridge 内建对象，借助这个对象实现音乐自动播放：

function autoPlay(src) {
  const audio = new Audio();
  // 该元素用来在页面上控制音乐的播放和暂停
  const musicEle = document.querySelector("#music")
  audio.src = src;
  audio.preload = "auto"
  let played = false;

  // 第一次触摸结束后开始播放音乐
  document.addEventListener("touchend", () => {
    if (played) return;
    if (audio.paused) {
      played = true;
      audio.play();
    }
  })

  // 兼容微信
  if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
      played = true;
      audio.play();
    }, false);
  } else {
    document.addEventListener("WeixinJSBridgeReady", function () {
      WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
        played = true;
        audio.play();
      });
    }, false);
  }

  // 控制音乐的播放和暂停
  musicEle.addEventListener("click", function () {
    if (audio.paused) {
      this.className = "on";
      audio.play();
    } else {
      this.className = "off"
      audio.pause();
    }
  })
}
autoPlay("./music.mp3");

以上就是在移动端自动播放音乐，同时兼容微信浏览器的方案。

完。