根据请求的顺序，Javascript返回NaN音频持续时间 [英] Javascript returns NaN for audio duration depending on request sequence

问题描述

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

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

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

  //根据HTML音频ID创建音频元素并相应地修改控件
 var aud = document.getElementById（storyTime）; 
 aud.setAttribute（src，story.audioTitle）; 
 console.log（DEBUG：Audio Duration =+ aud.duration）; //获取'NaN'
 console.log（DEBUG：Audio Source =+ aud.src）; 
 aud.controls = true; 
  

我试着用一个类似的函数在HTML中插入一个带有onclick回调的按钮。执行相同代码的该按钮返回正确的音频持续时间。

HTML：

 < button onclick =checkDuration（） type =button>获取音频长度< / button>< br> 
  

javascript：

  //检查音频持续时间
函数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提供的建议。

  //根据HTML音频ID创建音频元素并相应地修改控件
 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）; 
 
 
 $ / code $ / pre 
 
我相信这个解决方案是由于调用 load（）在调用 loadeddata 之前调用。 
 
 $ b 如果没有 load（）调用，最终会加载音频 ，但 loadeddata 事件会在可用时间（methinks）之前触发或异步触发。  
 
 
 
 
 
我做了一个测试函数来检查音频持续时间。 
 
 
  //检查音频持续时间并禁用控制如果NaN 
函数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版本）：Audio Duration：NaN 
 DEBUG（onloadeddata版本）：Audio Duration：1601.991111 
 
 
 
 
解决方案
事件 loadeddata 
 code>应该是你的朋友在这里： 
 
 
  aud.addEventListener（loadeddata，function（）{
 console.log（Audio data loaded）; 
 console.log（Audio duration：+ this.duration）; 
}）; 
  
 
I'm very new to Javascript.  I haven't had much success finding an answer to my query.  Here's a description of the problem.

I create an audio element and set the source to an .m4a file.  The .m4a file is able to both load and play successfully. 

I get strange results, however, when requesting the source audio duration.  The following javascript produces 'NaN' in Chrome:
  //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;
I tried then inserting a button with an onclick callback in the HTML with a similar function.  This button executing the "same code" returns the correct audio duration.    

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);
}
I figure the issue is with timing of said request.  However, if I preface the duration request with loading events such as 'canplaythrough' I still get the 'NaN' response when using the inline code.  
aud.addEventListener("canplaythrough", console.log("Audio duration = " + aud.duration));
I appreciate any tips on appropriately handing audio loading event sequence.



Thanks to Andy for the suggestions.  I was able to query reliable duration with the following code.
  //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);
    }
  }
The solution I believe is due to invoking the load() call before listening for loadeddata.  

Without the load() call, the audio does eventually load, but the loadeddata event fires before, or asynchronous, to duration available (methinks).  



I made a test function to check audio duration.  I try checking with two methods as follows:
//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);
  }
}
The results:

DEBUG (loadeddata version): Audio Duration: NaN
DEBUG (onloadeddata version): Audio Duration: 1601.991111

I'm not sure I understand the difference, or why there would be a difference.
解决方案
The event loadeddata should be your friend here:
aud.addEventListener("loadeddata", function() {
 console.log("Audio data loaded");
 console.log("Audio duration: " + this.duration);
});


                        
这篇关于根据请求的顺序，Javascript返回NaN音频持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！