- 場景：微信、瀏覽器、App
- 普通解決方案：采用audio標簽的autoplay屬性
- 現象：
- 大部分IOS系統和少部分Android微信不支持自動播放
$解決方案：監聽WeixinJSBridgeReady事件、DOMContentLoaded事件 微信的JS API建立在微信殼瀏覽器的內置JS對象WeixinJSBridge上，WeixinJSBridge並不是WebView一打開就有了，客戶端需要初始化這個對象，當這個對象准備好的時候，客戶端會拋出事件"WeixinJSBridgeReady"。 發現部分機型，監聽DOMContentLoaded和load事件，在回調中也可以播放音樂； 所以，為了保險起見，可以同時監聽兩個事件，以增強其適用性。 代碼如下： <audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('bg-music');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
- 部分Android瀏覽器和所有IOS下Safari瀏覽器不支持自動播放
解決方案：通過手勢事件播放音樂 (1) 監聽body的touchstart事件，回調中播放音樂； 缺點：部分元素的touch事件可能會阻止冒泡，需要在對應的地方調起播放音樂函數 (2) 可以增加透明層，點擊到透明層，播放音樂，關閉透明層； 缺點：第一次點擊按鈕元素可能不響應，造成用戶體驗上的傷害。
- 部分App不支持webview音樂自動播放
解決方案：1.殼瀏覽器支持；2.通過手勢事件播放音樂 完整代碼： // 音樂播放
function autoPlayMusic() {
// 自動播放音樂效果，解決瀏覽器或者APP自動播放問題
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自動播放音樂效果，解決微信自動播放問題
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var media = document.querySelector('#bg-music');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}