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

Question 1

オーディオの自動再生は、Mozilla、Microsoft Edge、古いGoogle Chromeでも機能しますが、新しいGoogleChromeでは機能しません。彼らは自動再生をブロックしました。それをグーグルクロームでオーディオ自動再生にする方法はありますか？

Question 2

解決策＃1

ここでの私の解決策は、 iframe

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

そして、audio非クロムブラウザ用タグaswell

<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ファイルsilence.mp3の良いソース

次に、実際のオーディオファイルを簡単に再生します。

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

個人的には、JavaScriptにあまり依存しないためのよりクリーンなアプローチであるソリューション＃2を好みます。

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 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>要素が動作しません。

Question 3

Chromeでオーディオタグの自動再生機能を使用するための本当に巧妙なトリックがあります。

追加

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

一方、silence.mp30.5秒の無音だけです。

この

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

後で動作します。

Chromeは、サウンドが再生されたことを認識し、オーディオタグでの自動再生を許可します。

Question 4

2018年4月の時点で、Chromeの自動再生ポリシーが変更されました。

「Chromeの自動再生ポリシーは単純です。

ミュートされた自動再生は常に許可されます。

次の場合、サウンドによる自動再生が許可されます。

ユーザーがドメインを操作しました（クリック、タップなど）。
デスクトップでは、ユーザーのメディアエンゲージメントインデックスのしきい値を超えています。これは、ユーザーが以前に音声付きの動画を再生したことを意味します。
モバイルでは、ユーザーは自分のホーム画面にサイトを追加しました。

また

上位のフレームは、自動再生権限をiframeに委任して、音声付きの自動再生を許可できます。「」

Chromeの開発者サイトには、いくつかのプログラミング例を含む詳細情報があります。これは、https：//developers.google.com/web/updates/2017/09/autoplay-policy-changesにあります。

Question 5

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudioに示されているように、この小さなスクリプトを追加するだけです。

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

これよりもあなたが望むように動作します：

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Question 6

少なくともこれを使用できます：

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

ユーザーがページの任意の場所をクリックすると、音楽が始まります。

また、EventListenerも即座に削除されるため、オーディオコントロールを使用すると、ユーザーはそれをミュートまたは一時停止でき、他の場所をクリックしても音楽は再開されません。

Question 7

次のように（.autoplay = true;）を使用するだけです（Chromeデスクトップでテスト済み）。

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

停止/再生ボタンを追加する必要がある場合：

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

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

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

停止/再生を1つのボタンにしたい場合：

<button onclick="PlayStop()" type="button">button</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

同じボタンに停止/再生を表示したい場合：

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

一部のブラウザでは、オーディオが正しく機能しない場合があるため、トリックとして、コードの前にiframeを追加してみてください。

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

<button onclick="PlayStop()" type="button">Play</button>


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

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Question 8

迷惑な広告のため、ブラウザはプライバシーを自動再生ビデオまたはオーディオに変更しました。したがって、以下のコードでだますことができます。

サイレントオーディオはiframeに入れることができます。

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

ソースとして.mp3を使用し、audio要素の前にallow = "autoplay"を指定して非表示のiframeを追加するだけです。その結果、ブラウザはだまされて後続のオーディオファイルを開始します。または、ミュートされていないビデオを自動再生します。

Question 9

私は今日これに打ちのめされてきました、そして私は私が発見した小さな骨董品を議論に加えたかっただけです。

とにかく、私はこれをやめました：

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

この：

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

そして最後に、これは、（私たちが行う）独自のものを生成したいだけの場合は、やや範囲外の「ソリューション」です。

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

私が行った発見と本当に面白い（奇妙な？奇妙な？ばかげた？）部分は、前の2つの場合、f5に適切なドキドキを与えることで実際にシステムを打ち負かすことができるということです。非常に高速に繰り返し更新を押すと（5〜10回程度はうまくいくはずです）、オーディオは自動再生され、その後、単一の更新時に数回再生されて、邪悪な方法に戻ります。素晴らしい！

グーグルからの発表では、メディアファイルが「自動的に」再生されるためには、ユーザーとサイトの間の相互作用が行われたに違いないと述べています。したがって、これまでに思いついた最善の「解決策」は、ボタンを追加して、ファイルの再生を自動ではなく、はるかに安定した信頼性の高いものにすることです。

Question 10

私はpixi.jsとpixi-sound.jsを使用して、chromeとfirefoxで自動再生を実現しました。

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML：

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

モバイルデバイスでも機能しますが、ユーザーは画面のどこかに触れてサウンドをトリガーする必要があります。

Question 11

iframe代わりに使用してください：

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

Question 12

一時的な修正

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

または、カスタムプレーヤーを使用して再生をトリガーします http://zohararad.github.io/audio5js/

注：自動再生は12月31日に有効になります

Question 13

コントロール属性もタグオーディオに追加し、CSSで非表示にします。そして、Chromeではすべて正常に動作します。

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

Question 14

Googleは先月、Chrome内での自動再生に関するポリシーを変更しました。この発表をご覧ください。

ただし、ビデオを埋め込んでいてミュートされている場合は、自動再生が可能です。mutedプロパティを追加すると、ビデオの再生を開始できるようになります。

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Question 15

iframeまたはjavascriptを使用しないソリューション：

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

このソリューションでは、InternetExplorerの開く/保存ダイアログも回避されます。

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>

スニペットを展開

Question 16

ビデオタグはオーディオも再生できます。オーディオタグが正常に動作していないように見える場合は、オーディオにビデオタグを使用できます。

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

Question 17

<iframe src="link/to/file.mp3" allow="autoplay">オリジンに自動再生権限がある場合は、を使用できます。詳細はこちら。

Question 18

デフォルトのHTML5audio自動再生属性はChromeでは機能しませんが、JavaScriptを使用してオーディオの自動再生を強制することができます。これを試して：

document.getElementById('myAudio').play();

これは私にとってはうまくいきます。