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事件会在可用持续时间（methinks）之前或异步触发。

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

//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 version）：音频持续时间：NaN DEBUG（onloadeddata version）：音频持续时间：1601.991111

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

Answer 1

活动loadeddata应该是您的朋友：

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

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

1 个答案: