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));

我很欣赏任何有关正确处理音频加载事件序列的提示.

---

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

  //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);
    }
  }

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

如果没有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(loadeddata版本):音频持续时间:NaN DEBUG(onloadeddata版本):音频持续时间:1601.991111

我不确定我是否理解这种差异,或者为什么会有区别.

Answer 1

这个活动loadeddata应该是你的朋友:

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