Jump to content

Javascript Await audio.duration


Heretic86
Go to solution Solved by Heretic86,

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

  

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 by Heretic86
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.