音频持续时间返回 NaN

Question

在 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>

Answer 1

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

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

在您的代码中，附加一个事件处理程序，以设置加载元数据时的持续时间：

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