Renvois de durée audio NaN

Question

Accès à un élément audio HTML5 (fichier .ogg) avec JavaScript dans Chrome. Le fichier est lu correctement, mais il ne reconnaît pas la durée.

Je viens cribbed ce code: https://www.w3schools.com/jsref/prop_audio_duration.asp (Je sais que W3Schools est pas grand, mais il semble que quelque chose est le problème ...)

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

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

l'élément ...

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

Answer 1

Ajouter preload="metadata" à votre tag pour avoir demandé les métadonnées de votre objet audio:

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

Dans votre code, liez un gestionnaire d'événements, pour définir la durée lorsque le metadata has been loaded:

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

Answer 2

côté @ solution de FrankerZ, vous pouvez également effectuer les opérations suivantes:

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