javascript - JavaScript/HTML - Alert box goes before sound?

Question

The code:

x = new Audio("bar.wav")

x.play()

alert("foo")

Why does the alert box show up first and then then sound is played??

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 Audio events not triggering on Chrome

--

由于您无法分配onload事件，因此您必须这样做：

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

HTML5 音频加载

Answer 4

只需使用：

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