MediaRecorder: dataavailable event

The MediaRecorder interface's dataavailable event is fired when the MediaRecorder delivers media data to your application for its use.

For details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable.

Examples

Using addEventListener to listen for dataavailable events:

...

var chunks = [];

mediaRecorder.addEventListener('stop', (event) => {
  console.log("data available after MediaRecorder.stop() called.");

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

mediaRecorder.addEventListener('dataavailable', (event) => {
  chunks.push(event.data);
});

...

The same, but using the ondataavailable event handler property:

...

var chunks = [];

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

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

mediaRecorder.ondataavailable = function(e) {
  chunks.push(e.data);
}

...

Specifications

Browser compatibility

TODO

See also

• Using the MediaRecorder API