Javascript根据请求序列返回音频持续时间的NaN

我对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:

我认为问题在于所述请求的时间安排。但是，如果我在持续时间请求前面加上加载事件，例如“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);
  }
}

结果是：

调试（loadeddata版本）：音频持续时间：NaN 调试（onloadeddata版本）：音频持续时间：1601.991111

---

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

事件

loadeddata

应该是您的朋友：

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

---

“我用加载事件（如‘canplaythrough’）作为持续时间请求的开头。”。你能展示一下你是如何做到这一点的吗？嗨@Andy，我尝试了

loadedevent

触发器来查询持续时间（根据你的例子），但仍然以“NaN”结束。之所以是NaN的唯一原因是如果它没有加载或流无法读取。。。您是否检查了您的开发控制台（->网络）是否正确加载了文件（代码200）？文件确实正确加载。如果我将console.log替换为alerts，那么观察事件的顺序是很有趣的，因为alerts在我的OK键上等待，所以它似乎具有调整速度的效果。第一个事件触发音频加载，在我的例子中是文本输入。

loadeddata

事件发生，第一个警报报告持续时间='NaN'。同时，音频控制器已加载到页面上，但确实显示0.00！我在警报上按OK，突然音频控制器更新以显示满载的音频长度。后续的音频持续时间查询报告了正确的持续时间。您说您尝试了“canplaythrough”。。隐马尔可夫模型。。可能您需要侦听“暂停”事件，这表明加载数据时出现问题。。

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

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