音频持续时间 returns 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>

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

时的持续时间

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

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

Answer 3

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

音频持续时间 returns NaN

Audio duration returns NaN

javascript

audio

nan