Javascript Await audio.duration

[Heretic86]

How would I write an async function that checks the value of an Audio Object has a duration that is not Infinity?

async () => {
  let duration = await whatGoesHere?();
  setDuration(duration);
}

Obviously the above code wont work.  Im getting an Audio object back, but when I first get it, the audio.duration is Infinity and comes down later with metadata which also appears unreliable.  So how can I use an async function without writing 300 lines of .then setTimeout .catch and do this rather simply?

[kicken]

You don't await anything, you use the durationchange event.

audio.addEventListener('durationchange', function(){
  console.log('Duration changed');
  setDuration(audio.duration);
});

 

[Heretic86]

5 minutes ago, kicken said:

You don't await anything, you use the durationchange event.

audio.addEventListener('durationchange', function(){
  console.log('Duration changed');
  setDuration(audio.duration);
});

 

It seems like that would work but it does not work as expected

Console log.

console.log("Duration changed " + audio.duration);
Duration changed 11.174603
Duration changed 21.363809
Duration changed 31.107482
Duration changed 41.431655
Duration changed 51.494603
Duration changed 61.37034
Duration changed 65.159546

Perhaps I need to look at another property?  What I am looking for is the total duration of an .ogg file, not how much can currently play.  Is there a better way to do this?

[kicken]

If you're initially seeing Infinity then it sounds like whatever media you're trying to play just doesn't have any duration information encoded into it.  MDN says (emphsis added):

Quote

If no media data is available, the value NaN is returned. If the element's media doesn't have a known duration—such as for live media streams—the value of duration is +Infinity

As such, I imagine it's updating the duration as it loads the file which is why you see the increasing time.  If this is a file that should have a fixed duration, then maybe it just needs to be re-encoded with that information?  I'm not really familiar with OGG or media file formats in general.

You could try the loadedmetadata event, but it sounds like it may not help.

 

[Heretic86]

I tried loadedmetadata too but not really getting very far.  Format doesnt matter to me much, so I could care less if its an MP3, OGG, or a freakin 8 Track Tape, but I dont think the metadata on 8 Track Tapes is easily readable by Javascript.

*idea* If I use a constant bit rate, could I use a Loaded and Total property?

[kicken]

I'd suggest you try re-encoding the file, maybe in another format, and see if it helps.  Light web searching suggests your issue is just that there is no duration metadata available and also suggests that may be somewhat common for .ogg in particular.

[Heretic86]

  

2 hours ago, kicken said:

I'd suggest you try re-encoding the file, maybe in another format, and see if it helps.  Light web searching suggests your issue is just that there is no duration metadata available and also suggests that may be somewhat common for .ogg in particular.

 I fingered it out.  Wait, that came out wrong.  Take Two, Action!  I figured it out!

Apparently this works much more way lots gooder-er...

audio.ontimeupdate = function(){
  audioController.value = audio.currentTime * (100 / audio.duration);
  currentTime.innerHTML = Math.floor(audio.currentTime / 60) + ":" + ("0" + Math.floor(audio.currentTime) % 60).slice(-2);
  totalTime.innerHTML = Math.floor(audio.duration / 60) + ":" + ("0" + Math.ceil(audio.duration) % 60).slice(-2);
}

 

Edited April 12, 2021 by Heretic86