H5頁面音頻自動播放問題


    最近有這么一個需求,需要在手機加載一個頁面的時候,自動播放音樂資源。一般情況下,這個問題也就解決了,但是要保證各種手機上表現一致,那就相當困難了,至少要費點兒周折。
 
    下面有三種常規的方式,可以創建自動播放的audio對象:
 
    第一種:頁面上創建一個audio標簽,寫好相關的屬性,如:autoplay='autoplay',正常情況下,這里寫上資源地址之后,訪問頁面之后就可以自動播放了。但是如果音樂資源地址不確定,需要js改變的話,就需要使用JS來實現了。
 
(function() {
        var audio = document.getElementById('myAudio1');
        audio1 = audio;
        audio.src = source;
        audio.loop = true;
        audio.autoplay = true;
        audio.play();
        audio.addEventListener('canplay', canPlay, false);
    })();

  

    第二種:和第一種比較相似,只不過所有的標簽都是JS創建之后,插入到頁面上的。
 
(function() {
        var audio = document.createElement("AUDIO");
        audio2 = audio;
        audio.setAttribute("src", source);
        audio.setAttribute("loop", 'true');
        audio.setAttribute("controls", 'controls');
        audio.setAttribute("autoplay", 'true');
        audio.setAttribute("id", 'myAudio2');
        audio.addEventListener('canplay', canPlay, false);
        document.getElementById('example2').appendChild(audio);
        audio.play();
    })();

  

    第三種:沒有任何dom標簽,使用JS創建一個audio對象,然后通過JS控制audio對象的各種api實現資源更換和自動播放。
    
(function() {
        var audio = new Audio();
        audio3 = audio;
        audio.src = source;
        audio.loop = true;
        audio.id = 'myAudio3';
        audio.autoplay = true;
        audio.addEventListener('canplay', canPlay, false);
        audio.play();
    })();
 
  附:上述三個方法的 demo 
 
    另外增加一種第三方庫實現,音頻資源的播放以及控制。
  整理了一些第三方庫,功能不只是播放音樂,還有一些其他功能,這個自己研究。
howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
buzz.js: http://buzz.jaysalvat.com/
audio.js: http://kolber.github.io/audiojs/
jPlayer.js: http://jplayer.org/
 
    使用了上述方法之后,發現在Iphone手機( 詳細說明)和部分android手機仍然不能,自動播放。
 
    他的播放條件是:必須有用戶行為操作,才能進行播放。
 
    所以就需要考慮,通過什么樣的方式可以模擬用戶的操作呢?網絡上提供了一些方式,可以實現自動播放,如:
  • 創建一個Image對象,然后監聽Image是否加載完畢,如果加載完畢,執行audio的播放,達到自動播放效果
  • 一個類似的方法, 創建一個iframe,資源直接就是音頻資源的地址,iframe加載完畢就能自動播放
  • 給document或者body綁定一個touchstart事件,這樣用戶只要觸碰到頁面就可以觸發播放
 
    上述提到的前兩條,我測試發現基本上沒有效果。至於第三條,這個肯定是沒有問題的,但是這種方式確實不完全算是自動播放,因為完全有可能用戶就是不觸碰頁面,那么就是不會播放。但是在有些場景下,確實可以使用,這個要區分場景。
 
    進而我想到了,能不能監聽手機是否運動或者是移動,來進行播放音頻呢?我監聽了devicemotion( 詳細說明)事件,發現還是不行,此時我已經凌亂了,死的心都有了。
 
    最后的最后,我使用了在頁面上創建audio標簽,使用JS調整audio相關屬性和值,然后控制音頻播放。
 
    這種方式基本上,可以在不同的手機上表現出相同的效果,但是就是我測試的一個5S手機就是不行。。。同樣別的5S卻沒有問題,具體原因到現在都沒有查出來我就默默的把他忽略了。
 
    為了能讓哪些不能自動播放的提升一些體驗,又綁定了一個touchstart事件,這樣就算是不能自動播放,至少可以在觸摸頁面的可以進行播放,算是一種體驗改進吧。
 
    補充:
  2015年05月31日 iOS 微信 音頻 視頻自動播放
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM