js控制ios裝置在微信開啟網頁時，自動播放音樂

實際情形：

• 今天在公司做一個微頁的專案，涉及到在微信裡面點選連結或者是掃描二維碼，開啟連結的時候，自動播放音樂。

• 這個功能是非常簡單的，直接在HTML頁面插入如下程式碼即可。

<audio src="1.mp3" autoplay="autoplay" controls></audio>

• 如果使用安卓手機進行訪問頁面的話，是沒有什麼錯誤的，音樂能正常自動播放。但是如果是使用ios裝置訪問頁面的話，音樂是不能自動播放的。

• 原來是蘋果公司考慮到使用者可能是用手機流量訪問的情況，為了使用者流量著想，所以需要使用者互動後才能播放。

• 但是我的這個專案要求網頁，必須自動進行播放音樂，於是便有了下面的解決辦法。

解決辦法：

• 首先，我們要給頁面中的<audio>標籤新增一個id="bg-music"。因為我們要在後面的js程式碼中，使用這個id="bg-music"獲取到<audio>標籤

<audio id="bg-music" src="1.mp3" autoplay="autoplay" controls></audio>

• 然後，我們將下面這些程式碼複製到自己的js程式碼中，就可以實現ios裝置自動播放音樂。或者是賦值下面這些程式碼，貼上到新建立的js指令碼檔案，然後在HTML頁面引入該指令碼檔案即可。

// DOM中的內容載入完畢之後，呼叫函式
document.addEventListener(`DOMContentLoaded`, musicInWeixinHandler);

function musicInWeixinHandler() {
    musicPlay(true);
    document.addEventListener("WeixinJSBridgeReady", function () {
        musicPlay(true);
    }, false);
    document.removeEventListener(`DOMContentLoaded`, musicInWeixinHandler);
}

function musicPlay(isPlay) {
    var media = document.querySelector(`#bg-music`);
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}