MediaRecorder: stop event

The stop event is fired when MediaRecorder.stop() is called, or when the media stream being captured ends. In each case, the stop event is preceded by a dataavailable event, making the Blob captured up to that point available for you to use in your application.


Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("stop", (event) => {});

onstop = (event) => {};

Event type

A generic Event.


mediaRecorder.onstop = (e) => {
  console.log("data available after MediaRecorder.stop() called.");

  const audio = document.createElement("audio");
  audio.controls = true;
  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  const audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;
  console.log("recorder stopped");

mediaRecorder.ondataavailable = (e) => {


MediaStream Recording
# dom-mediarecorder-onstop

Browser compatibility

BCD tables only load in the browser

See also