大多數瀏覽器都禁用了自動播放音樂的功能，因為這可能會帶來不好的用戶體驗以及更多的電池消耗。因此下面的代碼是無法正常工作的：

<audio autoplay="autoplay">
  <source src="./music.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

此外，企圖使用 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");

以上就是在移動端自動播放音樂，同時兼容微信瀏覽器的方案。

完。