大多数浏览器都禁用了自动播放音乐的功能，因为这可能会带来不好的用户体验以及更多的电池消耗。因此下面的代码是无法正常工作的：
<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
对于音乐自动播放的解决方案，主要有两大类：
- 使用
iframe - 借助事件
第一种方案通过借助 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");
以上就是在移动端自动播放音乐，同时兼容微信浏览器的方案。
完。
