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