web-dev-qa-db-ja.com

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

mozilla、Microsoft Edge、古いgoogle chromeでも機能するが、新しいgoogle chromeでは機能しないオーディオ自動再生。自動再生をブロックしました。 Google Chromeでオーディオを自動再生する方法はありますか？

html5google-chromehtml5-audio
37
Akshay Rathod

ソリューション＃1

ここでの私の解決策は、iframeを作成することです

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

chrome以外のブラウザの場合もaudioタグ

<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.mp

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

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

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

76
jt25

Chromeのオーディオタグの自動再生機能を使用するには、本当にすてきなトリックがあります。

追加する

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

一方、silence.mp3は0.5秒の沈黙のみです。

この

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

その後動作します。

Chromeは、サウンドが再生されたことに気付き、オーディオタグでの自動再生の許可を与えます。

実際にご覧ください： http://deinesv.cf/

16
Leonard Storcks

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

「Chromeの自動再生ポリシーはシンプルです：

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

次の場合、音声付きの自動再生が許可されます。

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

また

  • トップフレームは、iplayに自動再生許可を委任して、音声付きの自動再生を許可できます。 」

Chromeの開発者向けサイトには、プログラミング例などの詳細情報があります。これについては、こちらをご覧ください。 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

6
deltran

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>
5
Manuel Alves

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>
1
drpcken

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

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

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

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

1
Paul Becker

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

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

これは私のために動作します。

1
Mahtab Alam

Initでplay関数をトリガーするだけです：

var aud = document.getElementById("myAudio");
aud.play(); // this will do the trick :)
<audio id="myAudio">
  <source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>
0
J. Sadi

私は今日これを打ち破りました、そして私は議論に発見したちょっとした骨io品を加えたかっただけです。

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

<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回はトリックを実行する必要があります）、オーディオが自動再生され、その後、単純な更新時に数回再生されて邪悪な方法に戻ります。素晴らしい！

Googleからの発表では、メディアファイルが「自動的に」再生されるためには、ユーザーとサイトの間の対話が行われている必要があるとされています。ですから、これまでに思いついた最高の「解決策」は、ボタンを追加し、ファイルの再生を自動よりも少なくしますが、より安定/信頼性の高いものにすることです。

0
Puto Miké

代わりにiframeを使用します。

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
0
Jessé Mendonça

オーディオにタグを付けるコントロール属性を追加し、CSSで非表示にします。そして、すべてがChromeで正常に機能します。

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

一時修正

$(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日に有効になります

0
Youssef KH