實(shí)際情形：

• 今天在公司做一個(gè)微頁(yè)的項(xiàng)目，涉及到在微信里面點(diǎn)擊鏈接或者是掃描二維碼，打開(kāi)鏈接的時(shí)候，自動(dòng)播放音樂(lè)。

• 這個(gè)功能是非常簡(jiǎn)單的，直接在HTML頁(yè)面插入如下代碼即可。

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

• 如果使用安卓手機(jī)進(jìn)行訪問(wèn)頁(yè)面的話，是沒(méi)有什么錯(cuò)誤的，音樂(lè)能正常自動(dòng)播放。但是如果是使用ios設(shè)備訪問(wèn)頁(yè)面的話，音樂(lè)是不能自動(dòng)播放的。

• 原來(lái)是蘋(píng)果公司考慮到用戶可能是用手機(jī)流量訪問(wèn)的情況，為了用戶流量著想，所以需要用戶交互后才能播放。

• 但是我的這個(gè)項(xiàng)目要求網(wǎng)頁(yè)，必須自動(dòng)進(jìn)行播放音樂(lè)，于是便有了下面的解決辦法。

解決辦法：

• 首先，我們要給頁(yè)面中的<audio>標(biāo)簽添加一個(gè)id="bg-music"。因?yàn)槲覀円诤竺娴膉s代碼中，使用這個(gè)id="bg-music"獲取到<audio>標(biāo)簽

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

• 然后，我們將下面這些代碼復(fù)制到自己的js代碼中，就可以實(shí)現(xiàn)ios設(shè)備自動(dòng)播放音樂(lè)?；蛘呤琴x值下面這些代碼，粘貼到新創(chuàng)建的js腳本文件，然后在HTML頁(yè)面引入該腳本文件即可。

// DOM中的內(nèi)容加載完畢之后，調(diào)用函數(shù)
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();
    }
}