實(shí)際情形：
今天在公司做一個(gè)微頁(yè)的項(xiàng)目，涉及到在微信里面點(diǎn)擊鏈接或者是掃描二維碼汉买，打開鏈接的時(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)是蘋果公司考慮到用戶可能是用手機(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è)〗酰或者是賦值下面這些代碼铛纬，粘貼到新創(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();
}
}
