大多數(shù)瀏覽器都禁用了自動(dòng)播放音樂(lè)的功能，因?yàn)檫@可能會(huì)帶來(lái)不好的用戶體驗(yàn)以及更多的電池消耗。因此下面的代碼是無(wú)法正常工作的：
<audio autoplay="autoplay">
<source src="./music.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
此外，企圖使用 audio 元素的 play 方法自動(dòng)播放音樂(lè)，也是被禁止的：
const src = "./music.mp3";
const audio = new Audio();
audio.src = src;
audio.preload = "auto"
audio.play();
在 Chrome 中，上面的代碼會(huì)拋出一個(gè)異常：
Uncaught (in promise) DOMException
對(duì)于音樂(lè)自動(dòng)播放的解決方案，主要有兩大類：
- 使用
iframe - 借助事件
第一種方案通過(guò)借助 iframe 來(lái)進(jìn)行音樂(lè)的自動(dòng)播放，但我沒(méi)有測(cè)試效果如何，可以參考這里。
借助事件的方案很簡(jiǎn)單，就是監(jiān)聽(tīng)觸摸事件，當(dāng)?shù)谝淮斡|摸發(fā)生后就播放音樂(lè)，這樣就可以繞過(guò)瀏覽器的檢測(cè)。但缺點(diǎn)是如果用戶打開(kāi)網(wǎng)站后一直不觸摸屏幕，是不會(huì)自動(dòng)播放音樂(lè)的。不過(guò)這樣的例外很少，絕大多數(shù)用戶打開(kāi)頁(yè)面后都會(huì)發(fā)生觸摸動(dòng)作的，是個(gè)很好的解決方案。如果要追求百分之百自動(dòng)播放，不妨試試上面的 iframe 方案。
function autoPlay(src) {
const audio = new Audio();
// 該元素用來(lái)在頁(yè)面上控制音樂(lè)的播放和暫停
const musicEle = document.querySelector("#music")
audio.src = src;
audio.preload = "auto"
let played = false;
// 第一次觸摸結(jié)束后開(kāi)始播放音樂(lè)
document.addEventListener("touchend", () => {
if (played) return;
if (audio.paused) {
played = true;
audio.play();
}
})
// 控制音樂(lè)的播放和暫停
musicEle.addEventListener("click", function () {
if (audio.paused) {
this.className = "on";
audio.play();
} else {
this.className = "off"
audio.pause();
}
})
}
autoPlay("./music.mp3");
但這個(gè)方案在微信中不太好用，在我的手機(jī)上測(cè)試的時(shí)候，使用微信打開(kāi)頁(yè)面并觸摸不會(huì)自動(dòng)播放音樂(lè)（IOS 12.1.2，微信版本 6.7.4），因此存在一些兼容性問(wèn)題。
對(duì)于微信，可以通過(guò) WeixinJSBridge 對(duì)象來(lái)實(shí)現(xiàn)這個(gè)功能，微信自帶的瀏覽器提供了一個(gè) WeixinJSBridge 內(nèi)建對(duì)象，借助這個(gè)對(duì)象實(shí)現(xiàn)音樂(lè)自動(dòng)播放：
function autoPlay(src) {
const audio = new Audio();
// 該元素用來(lái)在頁(yè)面上控制音樂(lè)的播放和暫停
const musicEle = document.querySelector("#music")
audio.src = src;
audio.preload = "auto"
let played = false;
// 第一次觸摸結(jié)束后開(kāi)始播放音樂(lè)
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);
}
// 控制音樂(lè)的播放和暫停
musicEle.addEventListener("click", function () {
if (audio.paused) {
this.className = "on";
audio.play();
} else {
this.className = "off"
audio.pause();
}
})
}
autoPlay("./music.mp3");
以上就是在移動(dòng)端自動(dòng)播放音樂(lè)，同時(shí)兼容微信瀏覽器的方案。
完。
