音頻持續時間返回 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)
};

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 將 Audio 對象的持續時間屬性描述為只讀，因此您無法將音頻的持續時間歸因於變量。