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的解决方案之外，您还可以执行以下操作：

＆＃13;

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

＆＃13;

Answer 3

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

音频持续时间返回NaN

3 个答案: