"onstop" event not firing

[NoClipDigital]

Hello!

I see a new release just went up an hour ago, so I'm not sure if this is related.
The onstop event listener doesn't seem to fire for me.

(I'm using Vue.js)

import { MediaRecorder, register } from "extendable-media-recorder";
import { connect } from "extendable-media-recorder-wav-encoder";
export default {
  name: "Recorder",
  data() {
    return {
      mediaRecorder: null,
      chunks: [],
      urls: []
    };
  },
  methods: {
    record() {
      this.mediaRecorder.start();
    },
    stop() {
      this.mediaRecorder.stop();
    },
    handleData(e) {
      console.log(e);
      this.chunks.push(e.data);
    },
    handleStop() {
      var blob = new Blob(this.chunks, { type: "audio/wav" });
      this.chunks = [];

      this.urls.push(URL.createObjectURL(blob));
    }
  },

  async mounted() {
    await register(await connect());

    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: false
      }
    });
    this.mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/wav" });
    this.mediaRecorder.ondataavailable = this.handleData;
    this.mediaRecorder.onstop = this.handleStop;
  }
};

ondataavailable fires without any issues.
If I remove the extendable-media-recorderimports and default to the standard recorder, it fires correctly.

I tried using addEventListener('stop', ...) too, but no luck...

It's happening in the latest version of Chrome & Firefox.
Let me know if there's anything else I can do to help debug the issue.

Thanks!
Ger

[NoClipDigital]

After reviewing the code, it seems like the omission of this event is intentional. Ignore!

[chrisguttandin]

Hi @NoClipDigital, you're absolutely right. The stop event is not yet implemented. But as far as I remember there was no particular reason, despite of the usual too-many-things-not-enough-time problem.

Did you find a workaround for your use case?

It's for example possible to check the state of the MediaRecorder whenever the dataavailable event fires. If the state is 'inactive' it's safe to assume that the recording is done.

[NoClipDigital]

Yeah, my recordings shouldn't be more than ~20 seconds, so I just didn't specify a timeslice for the start function. When I hit stop, the ondataavailable event gets all the data in one go. Seems to be working fine!

Thanks you for the quick response though.

I was previously using RecorderJS, but I've having issues with users on old hardware getting pops in their recordings. Hopefully this'll run a bit smoother. 👍

[chrisguttandin]

Okay, great.

At least in theory it should perform a bit better. I think RecorderJS always uses the ScriptProcessorNode since that was the only option back then. extendable-media-recorder only uses that when used in Safari. And even that should not be necessary for much longer since Safari gets AudioWorklet support as well. I tried to explain the inner workings in the readme.

Feel free to create another issue if you run into any problems.

[chrisguttandin]

Hi @NoClipDigital, the stop event is finally supported now. #646