Chromeでオーディオを自動再生する方法質問する

Question

解決策 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() // just to make sure that it will not have 2x audio in the background 
  }

解決策2:

@Leonardによると、これに対する別の回避策もある。

iframe最初の読み込み時に自動再生をトリガーするためだけに、何も再生しないを作成します。

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

mp3ファイルの良いソース沈黙.mp3

その後、実際のオーディオファイルを簡単に再生できます。

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

個人的には解決策 #2JavaScript にあまり依存しないよりクリーンなアプローチだからです。

2019年8月更新

解決策3

代わりに、<embed>

のためにファイアフォックスオーディオの自動再生は機能しているようなので、<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 is the duration of your audio which in this case 2 mins.
}

また、オーディオのトグルイベントがある場合は、<embed>オーディオ用に作成された要素を必ず削除してください。

注記：<embed>切り替え後、はすでに削除されているため最初から再開され、<audio>要素は通常どおり再生されます。

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

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // play audio 
    }
    else {
        $(".audio1").pause();
    }

そして、これら<audio>と<embed>要素を必ず非表示にしてください

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

注意:要素diplay: noneが機能しなくvisibility: hiddenなります<embed>。

Answer 1