web-dev-qa-db-ja.com

javascriptオーディオオブジェクトとHTML5オーディオタグ

最近プロジェクトでサウンドをロードしたとき

var myAudio = new Audio("myAudio.mp3");
myAudio.play();

対話が開かれない限り（つまり、警告、確認）、正常に再生されました。しかし、代わりに私のHTMLにオーディオタグを追加しようとしたとき

<audio id="audio1">
    <source src="alarm.mp3" type="audio/mpeg" />
</audio>

使用して

var myAudio1 = document.getElementById("audio1");
myAudio1.play()

対話が開かれた後も再生を続けました。これがなぜだれか知っていますか？また、より一般的には、サウンドを再生する2つの方法の違いは何ですか？

javascripthtml5audio
48
ekcrisp

Mozillaの このwikiエントリ によると<audio>とnew Audio()shouldは同じですが、実際にはそうではないようです。 JavaScriptでオーディオオブジェクトを作成する必要があるときはいつでも、実際には次のような<audio>要素を作成します。

var audio = document.createElement('audio');

これは実際に、ページのHTMLで宣言された<audio>要素とまったく同じように使用できるオーディオelementを作成します。

この手法を使用して例を再作成するには、次のようにします。

var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();
22
pseudosavant

JavaScriptは、アラートまたは確認ボックスの間に停止します。

同時にコードを実行してalert()、confirm()、またはPrompt()を表示することはできません。これは文字通りユーザー入力を待機します。これはJavaScriptのコア機能です。

JavaScriptファイルの範囲内で完全に再生されるオーディオファイルがこれを行うのは、まさにその理由であると考えています。 JavaScriptアラート/確認/プロンプトが開いている場合でも、FlashビデオクリップまたはHTML5オーディオ/ビデオは比較的再生され続けます。

どの方法が優れているかについては、それはあなた次第です。 alert/confirm/Promptに組み込まれたJavaScriptを使用して何かを行うのは、かなり古風です。jQueryUIなどで作成できるプロンプトの見た目はずっと良くなっています。

ページに多くの動的コンテンツがある場合または、トリガーする必要がある前にオーディオをバックグラウンドでバッファリングするなどを検討している場合は、おそらくJavaScriptが物事を進める賢い方法です。

画面上に文字通り1人のプレイヤーのみがいる場合の場合、HTMLコードを使用しない理由はありません。最近ではだれにも影響を与えることはほとんどありませんが、理由がない場合にJavaScriptに大きく依存することは依然として悪い習慣です。

10
Aaron

ウェブ上のいくつかの回答から以下の機能を思いつきました。

function playAudio(url){
  var audio = document.createElement('audio');
  audio.src = url;
  audio.style.display = "none"; //added to fix ios issue
  audio.autoplay = false; //avoid the user has not interacted with your page issue
  audio.onended = function(){
    audio.remove(); //remove after playing to clean the Dom
  };
  document.body.appendChild(audio);
}
1
Kareem

作成する場合-iosで問題が発生します。width：0pxを設定しても表示されるためです。

0
nvvetal