HTMLMediaElement.duration 为音频文件返回 NaN答案

【问题标题】：HTMLMediaElement.duration returning NaN for audio fileHTMLMediaElement.duration 为音频文件返回 NaN
【发布时间】：2015-10-17 10:50:25
【问题描述】：

当单击屏幕上的按钮时，我有以下 JavaScript 播放声音，但是我只在持续时间内获得 NaN。

$(document).ready(function() {
  function play_sound() {
    var audio = new Audio("assets/sound.ogg");
    audio.play();
    var duration = audio.duration;
    console.log(duration);
  }

  $(document).on("click", ".box", function(e) {
    play_sound();
  });
});

在我的研究中，我发现this answer 使用了“loadeddata”事件，但是我不确定如何将其合并到我的代码中。我应该在我的 HTML 中使用 <audio> 元素吗？

【问题讨论】：

可能是因为音频还没有播放？试着把它放在 audio.play();声明。
@Oliver 试过了，不幸的是没有运气。编辑了我的问题并将其放在后面以表明它不起作用。

标签： javascript audio

【解决方案1】：

这是我的尝试：

$(document).ready(function() {
    function play_sound() {
        var audio = new Audio("assets/sound.ogg");
        audio.addEventListener("loadedmetadata", function(_event) {
            var duration = audio.duration;
            console.log(duration);
        });

        audio.play();
    }

    $(document).on("click", ".box", function(e) {
        play_sound();
    });
});

http://jsfiddle.net/x2pe6hcf/1/

添加了eventListener，它运行良好。

【讨论】：