Save the Duration from a Blob in a Browser [duplicate]

Question

I'm using window.MediaRecorder to record a wav audio file and then upload it to S3. I save chunks of data to an array and then create a Blob with them after recording is finished. This is working fine and I have no issues recording or playing the files. However, I can't for the life of me figure out how to set the duration of the resultant Blob file.

Whenever I download the file locally, or upload it to s3, there is no duration metadata anywhere. I am saving the duration of the audio as the user records, but have not been able to effectively attach this to the audio file. I feel like there should be a trivial solution, but I've just spent hours searching and can't seem to find anything on this. It has to be possible, so what am I missing?

Answer 1

Probably, you have already found a solution to this, but I am posting it for anyone else interested in this to see.

You could use MediaRecorder.onstart and onstop events.

1. When MediaRecorder's onstart event is triggered you need to get the current date with something like Date.now().
2. When onstop event is triggered, get the current date as well.
3. You need to subtract those two dates to get the recorded audio's duration.

References:

• https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onstart
• https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onstop
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now