App下載

怎么在HTML5頁(yè)面中讓音頻自動(dòng)播放？代碼分享！

猿友 2021-07-29 11:55:51 瀏覽數(shù) (20168)
反饋

今天小編和大家分享個(gè)在日常追劇中有關(guān)的內(nèi)容：“怎么在HTML5頁(yè)面中讓音頻自動(dòng)播放？”這方面的相關(guān)內(nèi)容我們?cè)谙旅娑加校Ｍ麑?duì)大家有所幫助！

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

第一種：頁(yè)面上創(chuàng)建一個(gè)audio標(biāo)簽，寫(xiě)好相關(guān)的屬性，如：autoplay='autoplay'，正常情況下，這里寫(xiě)上資源地址之后，訪問(wèn)頁(yè)面之后就可以自動(dòng)播放了。但是如果音樂(lè)資源地址不確定，需要js改變的話，就需要使用JS來(lái)實(shí)現(xiàn)了。

(function() {
        var audio = document.getElementById('myAudio1');
        audio1 = audio;
        audio.src = source;
        audio.loop = true;
        audio.autoplay = true;
        audio.play();
        audio.addEventListener('canplay', canPlay, false);
    })();

　第二種：和第一種比較相似，只不過(guò)所有的標(biāo)簽都是JS創(chuàng)建之后，插入到頁(yè)面上的。、

(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();
    })();

第三種：沒(méi)有任何dom標(biāo)簽，使用JS創(chuàng)建一個(gè)audio對(duì)象，然后通過(guò)JS控制audio對(duì)象的各種api實(shí)現(xiàn)資源更換和自動(dòng)播放。

(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();
    })();

附：上述三個(gè)方法的demo

另外增加一種第三方庫(kù)實(shí)現(xiàn)，音頻資源的播放以及控制。　 整理了一些第三方庫(kù)，功能不只是播放音樂(lè)，還有一些其他功能，這個(gè)自己研究。

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ā)現(xiàn)在Iphone手機(jī)（詳細(xì)說(shuō)明）和部分android手機(jī)仍然不能，自動(dòng)播放。

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

所以就需要考慮，通過(guò)什么樣的方式可以模擬用戶的操作呢？網(wǎng)絡(luò)上提供了一些方式，可以實(shí)現(xiàn)自動(dòng)播放，如：

  • 創(chuàng)建一個(gè)Image對(duì)象，然后監(jiān)聽(tīng)I(yíng)mage是否加載完畢，如果加載完畢，執(zhí)行audio的播放，達(dá)到自動(dòng)播放效果
  • 一個(gè)類似的方法， 創(chuàng)建一個(gè)iframe，資源直接就是音頻資源的地址，iframe加載完畢就能自動(dòng)播放
  • 給document或者body綁定一個(gè)touchstart事件，這樣用戶只要觸碰到頁(yè)面就可以觸發(fā)播放

上述提到的前兩條，我測(cè)試發(fā)現(xiàn)基本上沒(méi)有效果。至于第三條，這個(gè)肯定是沒(méi)有問(wèn)題的，但是這種方式確實(shí)不完全算是自動(dòng)播放，因?yàn)橥耆锌赡苡脩艟褪遣挥|碰頁(yè)面，那么就是不會(huì)播放。但是在有些場(chǎng)景下，確實(shí)可以使用，這個(gè)要區(qū)分場(chǎng)景。

進(jìn)而我想到了，能不能監(jiān)聽(tīng)手機(jī)是否運(yùn)動(dòng)或者是移動(dòng)，來(lái)進(jìn)行播放音頻呢？我監(jiān)聽(tīng)了devicemotion(詳細(xì)說(shuō)明)事件，發(fā)現(xiàn)還是不行，此時(shí)我已經(jīng)凌亂了，死的心都有了。

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

這種方式基本上，可以在不同的手機(jī)上表現(xiàn)出相同的效果，但是就是我測(cè)試的一個(gè)5S手機(jī)就是不行。。。同樣別的5S卻沒(méi)有問(wèn)題，具體原因到現(xiàn)在都沒(méi)有查出來(lái)我就默默的把他忽略了。

為了能讓哪些不能自動(dòng)播放的提升一些體驗(yàn)，又綁定了一個(gè)touchstart事件，這樣就算是不能自動(dòng)播放，至少可以在觸摸頁(yè)面的可以進(jìn)行播放，算是一種體驗(yàn)改進(jìn)吧。

補(bǔ)充：　　2015年05月31日iOS 微信 音頻 視頻自動(dòng)播放

以上就是有關(guān)于：“怎么在HTML5頁(yè)面中讓音頻自動(dòng)播放？代碼分享！”這方面的相關(guān)內(nèi)容分享，想必大家在學(xué)習(xí)過(guò)后對(duì)于html5音頻播放這方面也有了自己的見(jiàn)解，當(dāng)然更多與html5相關(guān)的知識(shí)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！ 


HTML5

0 人點(diǎn)贊