Question

176

Audio duration returns NaN

rated 0 times [ 183] [ 7] / answers: 1 / hits: 18312 / 7 Years ago, sat, june 17, 2017, 12:00:00

Accessing an HTML5 audio element (a .ogg file) with JavaScript in Chrome. The file does play properly, yet somehow it will not recognize the duration.

I just cribbed this code: https://www.w3schools.com/jsref/prop_audio_duration.asp (I know w3schools isn't great, but it seems like something else is the problem...)

var x = document.getElementById(testTone).duration;

console.log(duration:+x);  // duration:NaN



var y = document.getElementById(testTone);

y.play();   // works!

the element...

<audio controls id=testTone>

    <source src=autoharp/tone0.ogg type=audio/ogg>

</audio>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

desiraeleandrah

Add To Favorites

Follow

Total Points: 202

Total Questions: 111

Total Answers: 115

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

desiraeleandrah questions

1 How to create a gradient fill line chart in latest Chart JS version (3.3.2)?

Wed, Jun 2, 21, 00:00, 3 Years ago

1 e.preventDefault() not working in 100% cases

Thu, Nov 19, 20, 00:00, 4 Years ago

1 Jest testing of dispatchEvent with CustomEvent

Wed, Nov 11, 20, 00:00, 4 Years ago

1 NextJS rewrites in production

Wed, Oct 14, 20, 00:00, 4 Years ago

1 Image not loading when passing a prop to < img src=this.prop. /> in React

Tue, Mar 31, 20, 00:00, 4 Years ago

View All

answered 7 Years ago muhammadbrandend · Accepted Answer

Add preload=metadata to your tag to have it request the metadata for your audio object:

<audio controls id=testTone preload=metadata>

    <source src=autoharp/tone0.ogg type=audio/ogg>

</audio>

In your code, attach an event handler, to set the duration when the metadata has been loaded:

var au = document.getElementById(testTone);

au.onloadedmetadata = function() {

    console.log(au.duration)

};