Chrome瀏覽器中實現音訊自動播放的方法

Question

在Mozilla、Microsoft Edge和舊版Google Chrome中，音訊自動播放是可以工作的，但在Google Chrome 67 中由於自動播放政策的更改，無法自動播放。

他們已經阻止了自動播放（直到滿足連結博文中指定的特定會話條件為止）。如何在Google Chrome 67 中實現音訊自動播放？

Answer 1

解決方案＃1

#

我的解決方案是建立一個iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>

以及audio標籤，用於非Chrome瀏覽器

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

並且在我的script中

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if (!isChrome){
      $('#iframeAudio').remove()
  }
  else {
      $('#playAudio').remove() // 为了确保背景中不会有两个音频
  }

解決方案＃2：

#

根據@Leonard，還有另一種解

創建一個不播放任何內容的iframe，只是為了在第一次載入時觸發自動播放。

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>

好的mp3檔案來源：silence.mp3

#

然後輕鬆播放你的真實音訊檔案。

<audio id="player" autoplay loop>
    <source src="audio/source.mp3" type="audio/mp3">
</audio>

個人比較喜歡解＃2，因為它是比較乾淨的方法，不太依賴JavaScript。

更新於2019年8月

解決方案＃3

#

作為另一個選擇，我們可以使用<embed>

對於Firefox 似乎音訊自動播放是有效的，所以我們不需要<embed>元素，因為它會創建兩個音訊同時運行。

// index.js
let audioPlaying = true,
    backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
    $('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
    backgroundAudio = setInterval(function() {
        $("#background-audio").remove();
        $('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
    }, 120000); // 120000是你的音频持续时间，本例中为2分钟。
}

如果你的音訊有切換事件，請確保刪除已建立的<embed>元素。

注意：在切換之後，它將從頭開始，因為<embed>已經被刪除，<audio>元素現在將正常播放。

$(".toggle-audio").on('click', function(event) {
    audioPlaying = !audioPlaying;
    $("#background-audio").remove();

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // 播放音频
    }
    else {
        $(".audio1").pause();
    }

現在確保隱藏這些<audio>和<embed>元素

audio, embed {
    position: absolute;
    z-index: -9999;
}

注意：diplay: none和visibility: hidden會使<embed>元素無法運作。