大多數(shù)瀏覽器都禁用了自動播放音樂的功能，因為這可能會帶來不好的用戶體驗以及更多的電池消耗楣号。因此下面的代碼是無法正常工作的：
<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 來進行音樂的自動播放巢墅，但我沒有測試效果如何诸狭，可以參考這里。
借助事件的方案很簡單君纫，就是監(jiān)聽觸摸事件，當?shù)谝淮斡|摸發(fā)生后就播放音樂妹懒，這樣就可以繞過瀏覽器的檢測眨唬。但缺點是如果用戶打開網(wǎng)站后一直不觸摸屏幕，是不會自動播放音樂的好乐。不過這樣的例外很少匾竿，絕大多數(shù)用戶打開頁面后都會發(fā)生觸摸動作的，是個很好的解決方案蔚万。如果要追求百分之百自動播放岭妖，不妨試試上面的 iframe 方案。
function autoPlay(src) {
const audio = new Audio();
// 該元素用來在頁面上控制音樂的播放和暫停
const musicEle = document.querySelector("#music")
audio.src = src;
audio.preload = "auto"
let played = false;
// 第一次觸摸結(jié)束后開始播放音樂
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 對象來實現(xiàn)這個功能侧蘸，微信自帶的瀏覽器提供了一個 WeixinJSBridge 內(nèi)建對象，借助這個對象實現(xiàn)音樂自動播放：
function autoPlay(src) {
const audio = new Audio();
// 該元素用來在頁面上控制音樂的播放和暫停
const musicEle = document.querySelector("#music")
audio.src = src;
audio.preload = "auto"
let played = false;
// 第一次觸摸結(jié)束后開始播放音樂
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");
以上就是在移動端自動播放音樂鹉梨，同時兼容微信瀏覽器的方案。
完。
