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 微信 音頻 視頻自動播放