web-dev-qa-db-ja.com

HTML5オーディオは、手動で1回トリガーしない限り、Javascriptを介して再生できません

タグとjavascriptを使用して開始する小さなサウンドファイルを自動的に再生しようとしています。

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
 </audio>

そして、適切なタイミングでjavascriptを介して：

$('#denied')[0].play()

Chrome私のデスクトップ上で正常に動作します。Android 4.1.1では、前にHTML5オーディオコントロールで "play"を押さない限り、サウンドは再生されません。 javascriptはそれを再生しようとします。

つまり、基本的にAndroidブラウザ（ストックまたはDolphin）は、ユーザーがjavascriptの前のある時点で開始しない限り、オーディオを再生しません。これは意図されていますか？この方法はありますか？

javascriptandroidhtml5html5-audio
35
Jonah H.

さて、私の目的のために、私がやったことは次のとおりです：

幸いなことに、ユーザーが音声を開始する動作をトリガーする前に、ボタンをクリックする必要があります。要素の音量を0.0に設定し、このボタンをクリックすると「再生」します。

音が静かに再生された後、ボリュームプロパティを1.0に戻すだけで、ユーザーの介入なしで正常に再生されます。

10
Jonah H.

私の場合、これは簡単な解決策でした：
https://stackoverflow.com/a/28011906/4622767
これをコピーして、クロムに貼り付けます。

chrome://flags/#autoplay-policy

私のWebアプリには多くのページがリロードされるため、ユーザーに毎回ボタンを押すように強制することはできません。しかし、これは内部で使用するためのものであるため、ユーザーにchromeを使用するように強制し、そのオプションを構成できます。

15
FRa

モバイルサファリでは、play（）へのjavascript呼び出しはser初期化されたクリックイベントと同じ呼び出しスタック内になければならないことを知っています。 JavaScriptトリガーでクリックをスプーフィングすることも機能しません。

ネクサス7では、ユーザーのクリックによってjavascriptがトリガーされない限り再生されないことを確認できます。

9
Rob Lynch

主な問題は、ユーザーのクリックによって（iOSおよびAndroidで）サウンドをトリガーする必要があることです。私の回避策は非常に簡単でした。 audio.play()をクリックイベントリスナーに結び付けて、すぐに一時停止します。その時点から、音は完璧に機能します。

var myAudio = new Audio('assets/myAudio.mp3');
...
button.addEventListener("click", function() {
    myAudio.play();
    myAudio.pause();
    ...
});
6
Eli Mashiah

理由と、最初のユーザーインタラクションですべてのオーディオファイルを読み込み、後でプログラムされた方法でそれらを再生することによってそれを克服する方法に関するブログ投稿です： https://blog.foolip.org/2014/02/ 10/media-playback-restrictions-in-blink / このアプローチを採用すると、小さなJavaScriptモジュールがGitHubで利用可能になります https://github.com/MauriceButler/simple-audio

私はこのシンプルなアプローチを自分で試しました-シームレスに機能し、素晴らしいです！

4
makechaos

幸いなことに、私が取り組んでいるhtml5アプリはAndroid 4.1で動作する必要がありますが、クロスプラットフォームのものを作成しようとしている場合、これを少し適応させる必要があります。ボリュームを0.0に設定してから、コントロールの自動再生または自動再生が機能しましたが、ミュートも試みましたが、それも機能しませんでした。実際に動作するハッキングされたスクリプト：

function myAjaxFunction() {
  clearTimeout(rstTimer); //timer that resets the page to defaults
  var snd=document.getElementById('snd');
  snd.currentTime=snd.duration-.01; //set seek position of audio near end
  snd.play(); //play the last bit of the audio file
  snd.load(); //reload file
  document.getElementById('myDisplay').innerHTML=defaultDisplay;
  var AJAX=new XMLHttpRequest(); //won't work in old versions of IE
  sendValue=document.getElementById('myInput').value;
  AJAX.open('GET', encodeURI('action.php?val='+sendValue+'&fn=find'), true);
  AJAX.send();
  AJAX.onreadystatechange=function() {
    if (AJAX.readyState==4 && AJAX.status==200) {
      document.getElementById('myDisplay').innerHTML=AJAX.responseText;
      if (document.getElementById('err')) { //php returns <div id="err"> if fail
        rstTimer = setTimeout('reset()', 5000); //due to error reset page in 5 seconds
        snd.play(); //play error sound
        document.getElementById('myInput').value=''; //clear the input
      }
    }
  }
}
3
MaKR

自動再生にJavaScriptは必要ありません。コードにいくつかの問題があります。

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
</audio>

変更します（HTML5では、XHTMLの場合、attribute = "value"構文は必要ありません）。

<audio id="denied" autobuffer controls autoplay>
    <source src="sound/denied.wav" />
</audio>
<a href="#" id="play-button">play!</a>

IOSの自動再生が無効になっている場合、再生ボタンをクリックするか、JavaScriptを使用してこのようなカスタムコントロールにuserクリックイベントを配置する必要があります。

var audio = document.getElementById('denied');
var button = document.getElementById('play-button');
button.addEventListener('click',function(){
    audio.play();
});

またはjQueryを使用：

$('#play-button').click(function(){ audio.play(); });}

編集

HTML5はごく最近のテクノロジー（少なくとも一部の機能）であるため、ブラウザーの互換性と機能は時々変更されることに注意してください。

ハッキングへの依存度が低下したり、逆になったりすることがあるため、すべての人に現在の状態を常に把握しておくことをお勧めします。

適切な出発点： http://caniuse.com/#feat=audio （下部のタブを確認してください）。

また、グローバルオーディオソリューションの場合、 SoundManager2 JSライブラリの使用をお勧めします

3
aesede

それは私にも起こりました。これをハッキングした方法は次のとおりです。

オーディオをautoplayに設定し、volを_0_に設定します。再生する必要がある場合は、load()メソッドを使用すると自動再生されます。軽いmp3ファイルで、1時間/ 2時間ごとに再生されるので、これはうまく機能します。

2
Marks

アプリで同じ問題に遭遇しました。私のアプリケーション使用シナリオは次のようなものでした：

  1. ボタンをクリックして、情報を含む表を表示します（ユーザーアクション）
  2. テーブルを表示し、AJAXでテーブル内のデータを更新します
  3. データが変更されたときにサウンドを再生する

幸い、ユーザーアクション（ステップ1）があったので、それによってサウンドを「開始」し、ユーザーアクションを必要とせずにjavascriptで再生することができました。コードを参照してください。

[〜＃〜] html [〜＃〜]

<audio id="kohoutAudio">
    <source src="views/images/kohout.mp3">
</audio>

<button id="btnShow">Show table</button>

Javascript

$("#btnShow").click(function () {
    //some code to show the table
    //initialize the sound
    document.getElementById('kohoutAudio').play();
    document.getElementById('kohoutAudio').pause();
});

function announceChange(){
    document.getElementById('kohoutAudio').play();
};
2
Luboš Miřatský