Bug in code? I am unable to find. It is about audio in javascript!

Question

I wanted to create an audio player. But I dont know what is happening in the program! There is a bug which I am unable to find. The javascript and html code is given below:

HTML:
<audio id="myAudio" class="music"></audio>

JS:
var audio = document.getElementById("myAudio");
audio.src = "(valid path of audio)";
audio.load();
audio.play();
console.log(audio.duration)-------(Returns NaN)

The audio plays successfully but when I want duration or any other data about the audio. It returns NaN, undef..etc
I know this happens when no audio is set.

audio.duration doesnt return NaN if i dont change the src

Answer 1

By adding an event listener for the loadedmetadata event, you can ensure that you are trying to access the duration only after the metadata has been loaded by browser, this the tricks avoiding getting NaN.