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 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 Audio onLoad

Answer 4

只需使用：

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

JavaScript / HTML - 警报框在声音之前消失？

4 个答案: