Javascript 根据请求序列返回音频持续时间的 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 回调的按钮。这个执行“相同代码”的按钮返回正确的音频持续时间。

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(加载数据版本):音频持续时间:NaNDEBUG(onloadeddata 版本):音频持续时间:1601.991111

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

Answer 1

事件 loadeddata 应该是你的 friend :

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