移動端 h5 ios不能自動播放音樂的問題：

verano 發(fā)布于2019-08-23 14:14 / 2202人閱讀

摘要：如果我們想要在一個頁面自動播放背景音樂或是其他音頻，比如是沒辦法調(diào)用事件直接調(diào)用，非得添加手動點擊事件才可以。接下來就說說我在項目里遇到的困難和解決辦法情況我們知道安卓是可以直接調(diào)用音頻的事件的，不行。

如果我們想要在一個頁面自動播放背景音樂或是其他音頻，比如ios是沒辦法調(diào)用audio.play()事件直接調(diào)用，非得添加手動點擊事件才可以。接下來就說說我在項目里遇到的困難和解決辦法.
情況1、我們知道安卓是可以直接調(diào)用音頻的play事件的，ios不行。如是在多帶帶的h5頁面，無路由，這種情況就必須加個引導按鈕點擊它，或是在頁面全局設(shè)置一個點擊事件one，當用戶第一次且僅第一次碰到頁面就播放。這里用vue距舉例：



methods: {
    playBgMusic () {
        let isiOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) this.bgMusic.play();
    }
}
mounted(){
      this.bgMusic = new Audio();
      this.bgMusic.loop = true;
      this.bgMusic.src = require("xxx.mp3");
      this.bgMusic.load();
      this.bgMusic.play();
}

情況2、如果是當用戶使用hash或者有路由跳轉(zhuǎn)的情況，可以使用在跳轉(zhuǎn)頁添加全局audio對象的方式來控制。這里使用vue舉例：首先可在router/index.js里設(shè)置window.audio=null,在跳轉(zhuǎn)前的頁面new一個video 并將此對象賦予window.audio，然后即可在下一個頁面使用audio對象。代碼：

/*router/index.js*/
window.bgMusic=null;

/*跳轉(zhuǎn)頁面 router/beforeGo.js 跳轉(zhuǎn)事件*/
跳轉(zhuǎn)到自動播放音樂的頁面

methods: {
    goTo () {
        const audio = new Audio();
        audio.addEventListener("canplay", () => {audio.play()});
        audio.loop = true;
        audio.src = mathBgVoice;
        audio.load();
        bgMusic = audio;
        this.$router.replace("自動播放音樂的頁面路由")  
    }
}

情況3：如果你的業(yè)務(wù)主要是在微信上，那么可以使用以下代碼，可實現(xiàn)在微信瀏覽器中iOS和安卓設(shè)備中自動播放音頻的效果：

var play = function() {
        document.removeEventListener("WeixinJSBridgeReady", play);
    document.removeEventListener("YixinJSBridgeReady", play);
    audioCtx.play();
};
document.addEventListener("WeixinJSBridgeReady",play, false);
document.addEventListener("YixinJSBridgeReady", play, false);

這樣處理以后，在跳轉(zhuǎn)頁面先尋找播放時機，等跳轉(zhuǎn)到播放音樂的頁面即可實現(xiàn)‘自動播放背景音樂’的功能。