音频持续时间返回 NaN

Posted 2023-03-05

【中文标题】音频持续时间返回 NaN

【英文标题】：Audio duration returns NaN

【发布时间】：2021-12-14 05:59:43

【问题描述】：

在 Chrome 中使用 javascript 访问 html5 音频元素（.ogg 文件）。该文件确实可以正常播放，但不知何故它无法识别持续时间。

我刚刚抄下了这段代码：https://www.w3schools.com/jsref/prop_audio_duration.asp（我知道 w3schools 不是很好，但似乎还有其他问题......）

var x = document.getElementById("testTone").duration;
console.log("duration:"+x);  // duration:NaN

var y = document.getElementById("testTone");
y.play();   // works!

元素...

<audio controls id="testTone">
    <source src="autoharp/tone0.ogg" type="audio/ogg">
</audio>

【问题讨论】：

你的html是什么样的？

因为audio需要时间来加载，当你调用.duration时它还没有准备好

@Aravind 添加在上面...

【参考方案1】：

将preload="metadata" 添加到您的标签以使其请求音频对象的元数据：

<audio controls id="testTone" preload="metadata">
    <source src="autoharp/tone0.ogg" type="audio/ogg">
</audio>

在您的代码中，附加一个事件处理程序，以设置metadata has been loaded 的持续时间：

var au = document.getElementById("testTone");
au.onloadedmetadata = function() 
    console.log(au.duration)
;

【讨论】：

参考：stevesouders.com/blog/2013/04/12/html5-video-preloadpreload='metadata' “Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.”

谢谢！我还在研究这个，它有帮助。页面加载显然具有我需要更好地理解的复杂性。一个问题：在音频需要时间加载的评论之后，我尝试用（jQuery）document.ready 函数包装我的原始代码......没有工作。你能解释一下为什么不吗？

另外——为什么在这里使用函数？它有效，但我觉得我错过了一些东西。

【参考方案2】：

除了@FrankerZ 的解决方案，您还可以执行以下操作：

<audio controls id="testTone">
  <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
</audio>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction() 
    var x = document.getElementById("testTone").duration;
    console.log("duration:" + x); // duration:NaN

    var y = document.getElementById("testTone");
    y.play(); // works!
  
</script>

【讨论】：

这是解释 w3schools 问题的晦涩方式吗？直接的方法会更好......

@GregoryTippett 在您的代码中，源代码也无效。

@GregoryTippett preload='metadata' 是一个更好的方法 TBO :D

【参考方案3】：

W3schools 将音频对象的 duration 属性描述为只读，因此您无法将音频的持续时间归因于变量。