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事件，它比下面的例子更加强大，但我没有测试过： HTML5音频事件没有在Chrome上触发

-

由于您无法分配onload事件，因此必须执行以下操作：

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

HTML5音频onLoad

Answer 4

只需使用：

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