MediaRecorder: stop event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
The stop event of the MediaRecorder interface 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.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("stop", (event) => { })
onstop = (event) => { }
Event type
A generic Event.
Example
js
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) => {
chunks.push(e.data);
};
Specifications
| Specification |
|---|
| MediaStream Recording # dom-mediarecorder-onstop |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
stop event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- Using the MediaStream Recording API
- Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on GitHub.)
- simpl.info MediaStream Recording demo, by Sam Dutton.
Navigator.getUserMedia