Javascript returns 音频持续时间为 NaN，具体取决于请求序列

Question

我对 Javascript 很陌生。我没有成功找到我的查询的答案。这是问题的描述。

我创建了一个音频元素并将源设置为 .m4a 文件。 .m4a 文件能够成功加载和播放。

但是，在请求源音频持续时间时，我得到了奇怪的结果。以下 javascript 在 Chrome 中产生 'NaN'：

  //Create audio element based on HTML audio id and modify controls accordingly
  var aud = document.getElementById("storyTime");
  aud.setAttribute("src",story.audioTitle);
  console.log("DEBUG: Audio Duration = " + aud.duration);  //Get 'NaN'
  console.log("DEBUG: Audio Source = " + aud.src);
  aud.controls = true;

然后我尝试在具有类似功能的 HTML 中插入一个带有 onclick 回调的按钮。此按钮执行 "same code" returns 正确的音频持续时间。

HTML:

<button onclick="checkDuration()" type="button">Get audio length</button><br>

javascript:

//Check audio duration
function checkDuration() {
  var aud = document.getElementById("storyTime");
  console.log("DEBUG: Audio Duration: " + aud.duration);
}

我认为问题出在上述请求的时间安排上。但是，如果我在持续时间请求前加上诸如 'canplaythrough' 之类的加载事件，我在使用内联代码时仍然会收到 'NaN' 响应。

aud.addEventListener("canplaythrough", console.log("Audio duration = " + aud.duration));

我感谢任何关于适当处理音频加载事件序列的提示。

感谢安迪的建议。我能够使用以下代码查询可靠的持续时间。

  //Create audio element based on HTML audio id and modify controls accordingly
  var aud = document.getElementById("storyTime");
  aud.setAttribute("src",story.audioTitle);
  aud.controls = true;
  aud.load();

  aud.onloadeddata = function(){
    var audDuration = aud.duration;
    console.log("aud.duration = " + audDuration);
    }
  }

我认为解决方案是在侦听 loadeddata 之前调用 load()。

如果没有 load() 调用，音频会最终加载，但 loadeddata 事件会在可用持续时间之前或异步触发（方法） .

我做了一个测试函数来检查音频持续时间。我尝试使用以下两种方法进行检查：

//Check audio duration and disable controls if NaN
function checkDuration() {
  var aud = document.getElementById("storyTime");
  aud.addEventListener("loadeddata",console.log("DEBUG (loadeddata version): Audio Duration: " + aud.duration));

  aud.onloadeddata = function(){
    var audDuration = aud.duration;
    console.log("DEBUG (onloadeddata version): Audio Duration: " + audDuration);
  }
}

结果：

DEBUG（加载数据版本）：音频时长：NaN DEBUG（onloadeddata 版本）：音频持续时间：1601.991111

我不确定我是否理解差异，或者为什么会有差异。

Answer 1

活动loadeddata应该是你的朋友：

aud.addEventListener("loadeddata", function() {
 console.log("Audio data loaded");
 console.log("Audio duration: " + this.duration);
});

Javascript returns 音频持续时间为 NaN，具体取决于请求序列

Javascript returns NaN for audio duration depending on request sequence

javascript

html

audio

duration