解決H5中背景音樂無法自動(dòng)播放問題
0評(píng)論 2017-04-19 18:42:57
收藏
|
點(diǎn)贊
一、前言
現(xiàn)在客戶要求做H5場(chǎng)景應(yīng)用、H5微刊、H5微雜志的時(shí)候加入背景音樂，這樣能夠很好地烘托氣氛還能使整個(gè)案例生動(dòng)不少，然并卵，由于市場(chǎng)上的手機(jī)型號(hào)過于繁雜，對(duì)于H5 API的支持十分地不統(tǒng)一，還有H5運(yùn)行平臺(tái)的不一致：有的在微信殼下，有的在瀏覽器里，有的在自己的APP里，等等因素造成在H5開發(fā)的過程中一不小心就掉進(jìn)坑里了，今天小五就來講一講很多人在H5開發(fā)中遇到的背景音不能自動(dòng)播放的問題。
二、原因
現(xiàn)在IOS系統(tǒng)升級(jí)以后，禁止了Audio的Autoplay屬性，原因如下：
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie:
This does nothing on iOS:
詳情請(qǐng)查看
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
翻譯過來后可以了解到：蘋果為了用戶著想，禁止了 Autoplay 和JS "onload" 加載播放，也就是說即使你在html 文件里使用了preload 和autoplay 屬性，在移動(dòng)版 Safari 上，此屬性會(huì)被忽視，并且不會(huì)加載視頻流，甚至不會(huì)下載該視頻流 。除非用戶物理點(diǎn)擊一次屏幕，其實(shí)現(xiàn)在不能蘋果手機(jī)，其他的安卓手機(jī)和部分App有時(shí)也存在背景音不能自動(dòng)播放的問題。
三、背景音不能自動(dòng)播放的場(chǎng)景及解決辦法
1、大部分IOS系統(tǒng)和少部分Android系統(tǒng)的微信殼下不支持自動(dòng)播放
解決方案 ：監(jiān)聽WeixinJSBridgeReady事件、DOMContentLoaded事件
微信的JS API建立在微信殼瀏覽器的內(nèi)置JS對(duì)象WeixinJSBridge上，WeixinJSBridge并不是WebView一打開就有了，客戶端需要初始化這個(gè)對(duì)象，當(dāng)這個(gè)對(duì)象準(zhǔn)備好的時(shí)候，客戶端會(huì)拋出事件"WeixinJSBridgeReady"。
發(fā)現(xiàn)部分機(jī)型，監(jiān)聽DOMContentLoaded和load事件，在回調(diào)中也可以播放音樂；
所以，為了保險(xiǎn)起見，可以同時(shí)監(jiān)聽兩個(gè)事件，以增強(qiáng)其適用性。
代碼如下：
您的瀏覽器不支持 audio標(biāo)簽。
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById(' musicid ');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
2、部分Android瀏覽器和所有IOS下Safari瀏覽器不支持自動(dòng)播放
解決方案：通過手勢(shì)事件播放音樂
(1) 監(jiān)聽body的touchstart事件，回調(diào)中播放音樂；
缺點(diǎn)：第一次點(diǎn)擊按鈕元素可能不響應(yīng)， 部分元素的touch事件可能會(huì)阻止冒泡，需要在對(duì)應(yīng)的地方調(diào)起播放音樂函數(shù)
var audio = document.getElementById('musicid');
function musicInBrowserHandler() {
audio.play();
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
(2) 可以增加透明層，點(diǎn)擊到透明層，播放音樂，關(guān)閉透明層；
缺點(diǎn)：第一次點(diǎn)擊按鈕元素可能不響應(yīng) ，而且有時(shí)候用戶不會(huì)在打開頁(yè)面短時(shí)間內(nèi)點(diǎn)擊，造成用戶體驗(yàn)上的傷害。
部分App 不支持webview 音樂自動(dòng)播放
解決方案：1.殼瀏覽器支持；2.通過手勢(shì)事件播放音樂
缺點(diǎn)：有些殼瀏覽器可能沒有音頻自動(dòng)播放的接口，或者用戶不進(jìn)行手勢(shì)操作。
四、完整代碼
您的瀏覽器不支持 audio標(biāo)簽。
// 音樂播放
function autoPlayMusic() {
// 自動(dòng)播放音樂效果，解決瀏覽器或者APP自動(dòng)播放問題
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自動(dòng)播放音樂效果，解決微信自動(dòng)播放問題
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var audio = document.getElementById('musicid');
if (isPlay && audio.paused) {
audio.play();
}
if (!isPlay && !audio.paused) {
audio.pause();
}
}
autoPlayMusic();
PS ：上面的代碼僅僅是解決背景音樂不自動(dòng)播放的問題，如需加控制音樂播放和暫停的代碼，請(qǐng)各位小伙伴先自行摸索一下；建議：針對(duì)代碼運(yùn)行平臺(tái)，采取對(duì)應(yīng)的代碼，這樣既減少代碼量也避免出現(xiàn)莫名的 BUG ，比如：第一次點(diǎn)擊按鈕元素可能不響應(yīng) 。
五、總結(jié)
蘋果和部分安卓手機(jī)認(rèn)為這種背景音自動(dòng)播放，是不友好的行為，所以給禁了，其實(shí)小五也比較偏向于由用戶選擇是否播放音樂，畢竟流量還是很貴的，一個(gè)音頻文件少則幾十K，多則好幾M，流量刷刷的沒有了，然而大家還是在自動(dòng)播放背景音上想盡辦法，這對(duì)用戶體驗(yàn)真的好嗎？
六、建議
那么對(duì)于選擇自動(dòng)播放音樂的客戶，小五提出一些建議：
1.音樂不宜過長(zhǎng)，30s為佳，而且音樂要加上漸現(xiàn)漸隱效果，方便循環(huán)播放；
2.音樂體積要小，音質(zhì)和流量，在手機(jī)上還是優(yōu)先考慮流量吧。
一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積。
暫無評(píng)論
0 條評(píng)論