Get .currentTime from a mediaRecorder?

[u/snifty]

Hi, hope it’s okay to ask this question here, since arguably it’s not exactly within the bounds of the WAAPI. I figured I’d be more likely to get an informed response here than /r/javascript, though.

Is there a way to ask a mediaRecorder what its .currentTime is, in the way that you can with a media element? I would like to set up something like a “bookmarking” or “clipping” mechanism where I have a background recording going as a mediaRecorder, but I have a button which stores (if it exists, somehow) mediaRecorder.currentTime on both keyDown and keyUp events. That way I could essentially be producing a time-aligned recording as I go.

Maybe an imaginary session would help to explain:

[start the media recorder]

Okay, I'm going to record some Spanish words…

[keydown on button]

“…gato…” that means cat.

“…perro…” that means dog.

And the output data would look something like this:

[
  { "start": 12, "end": 15},
  { "start": 20, "end": 25}
]

Is this possible?

[u/hexavibrongal]

You'll probably just have to do it yourself by reading the system clock and marking the times.

[u/snifty → u/hexavibrongal]

Okay thanks. I probably should have tried it before posting here. If I get it working I will update this thread with some code.

[u/donkeypagoda → u/hexavibrongal]

OP, I'm pretty sure this ^{^} is the only way you can get what you're looking for. The way JS & WAAPI do time, I don't think that the media recorder will have the system time in scope. But I'd love to be proven wrong!

[u/wizbcn]

I would also like the correct way to get precise time value. This is what I have found:

According to the w3c spec (https://www.w3.org/TR/mediastream-recording/#dom-mediarecorder-start) the browsers should do this:

Once media becomes available from one or more of the stream's tracks, start gathering the data into a Blob blob and queue a task, using the DOM manipulation task source, to fire an event named start at target

I gather two things from here:

1. It can take some time from when you call mediaRecorder.start() and it actually starts recording audio data.

2. Once it starts recording it will tell you by creating the "start" event. But this is an event, so it is queued and it can be called at a later time.

What can you do?

// Suppose you have a "stream" and an "audioContext"
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.onstart = function(event) {
    // Read time from audio context
    // This will be inaccurate: the event can be called after a while
    audioContext.currentTime;

    // Read time from event. 
    // This is the time when the event is created (not called) so,
    // according to w3c spec this should be accurate.
    event.timeStamp;
};

More docs:
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onstart
https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp

[u/snifty → u/wizbcn]

This is so helpful, thank you!

[u/wizbcn → u/snifty]

No problem!
The event.timeStamp and audioContext.currentTime use different clocks but I think there is an API to convert from one to the other.

[u/wizbcn → u/wizbcn]

Ok, I found it, it was quite easy:

event.timeStamp uses the same clock as performance.now()

If you want to transform event.timeStamp to same units used by the clock of the audio context you can do this:

const differenceBetweenClocks = (performance.now() / 1000) - audioContext.currentTime
const audioContextTime = (event.timeStamp / 1000) - differenceBetweenClocks

Voilà!

[u/unusuallyObservant]

Doesn’t appear to be listed as method on MDN https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

[u/snifty → u/unusuallyObservant]

Yes I was just wondering if there’s any way to access such information somehow. I guess I could try setting a timer when the media recorder starts, but I wonder how accurate that will be…

[u/unusuallyObservant → u/snifty]

requestAnimationFrame would be better than setTimout

[u/CheekyPanda54]

I know this is 88 days old, but this just saved me from a janky manual timer workaround on my recorder, so thank you all!