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