javascript - JavaScript/HTML - 警告ボックスがサウンドよりも先に表示されますか?

Question

コード：

x = new Audio("bar.wav")

x.play()

alert("foo")

最初に警告ボックスが表示されてからサウンドが再生されるのはなぜですか??

Answer 1

これは、サウンド ファイルが JavaScript によって非同期的に読み込まれ、コードが引き続き実行されるためです。サウンド ファイルの読み込みに時間がかかるため、アラートが最初に発生します。

これを修正するには、次のように、ロード時にイベント リスナーを追加する必要があります。

x.addEventListener('load', function() {
    x.play();
    alert("foo");
});

または、次のように、イベント リスナーをイベントに追加することもできますonplay。

x.onplay = function () { alert("foo"); };
x.play();

Answer 2

プレイイベントを待つ必要があります。その時、実際に音が鳴り始めます。しかし、警告ボックスがコードの実行を一時停止し、サウンドを台無しにする可能性があるという単なるアドバイスです。

x = new Audio("bar.wav")
x.onplaying = function ()
{
  alert("foo");
}
x.play();

Answer 3

編集: この投稿では、onloadeddataイベントが使用されています。以下の例よりも興味深いですが、テストしていません: Chrome で HTML5 オーディオ イベントがトリガーされない

--

onloadイベントを割り当てることができないため、これを行う必要があります。

$(function(){
    youraudioelement = new Audio("bar.wav")
    var audioReady = function(){
        if (youraudioelement.attr('readyState')) {
            alert("foo");
        } else {
            setTimeout(audioReady, 250);
        }
    }
    audioReady();
}

HTML5 オーディオのオンロード