HTML5頁面中怎么讓音頻自動播放

今天小編給大家分享一下HTML5頁面中怎么讓音頻自動播放的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

下面有三種常規(guī)的方式，可以創(chuàng)建自動播放的audio對象：

第一種：頁面上創(chuàng)建一個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創(chuàng)建之后，插入到頁面上的。、

(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創(chuàng)建一個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/

使用了上述方法之后，發(fā)現在Iphone手機（詳細說明）和部分android手機仍然不能，自動播放。

他的播放條件是：必須有用戶行為操作，才能進行播放。

所以就需要考慮，通過什么樣的方式可以模擬用戶的操作呢？網絡上提供了一些方式，可以實現自動播放，如：

• 創(chuàng)建一個Image對象，然后監(jiān)聽Image是否加載完畢，如果加載完畢，執(zhí)行audio的播放，達到自動播放效果

• 一個類似的方法， 創(chuàng)建一個iframe，資源直接就是音頻資源的地址，iframe加載完畢就能自動播放

• 給document或者body綁定一個touchstart事件，這樣用戶只要觸碰到頁面就可以觸發(fā)播放

上述提到的前兩條，我測試發(fā)現基本上沒有效果。至于第三條，這個肯定是沒有問題的，但是這種方式確實不完全算是自動播放，因為完全有可能用戶就是不觸碰頁面，那么就是不會播放。但是在有些場景下，確實可以使用，這個要區(qū)分場景。

進而我想到了，能不能監(jiān)聽手機是否運動或者是移動，來進行播放音頻呢？我監(jiān)聽了devicemotion(詳細說明)事件，發(fā)現還是不行，此時我已經凌亂了，死的心都有了。

最后的最后，我使用了在頁面上創(chuàng)建audio標簽，使用JS調整audio相關屬性和值，然后控制音頻播放。

這種方式基本上，可以在不同的手機上表現出相同的效果，但是就是我測試的一個5S手機就是不行。。。同樣別的5S卻沒有問題，具體原因到現在都沒有查出來我就默默的把他忽略了。

為了能讓哪些不能自動播放的提升一些體驗，又綁定了一個touchstart事件，這樣就算是不能自動播放，至少可以在觸摸頁面的可以進行播放，算是一種體驗改進吧。

以上就是“HTML5頁面中怎么讓音頻自動播放”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。