MediaRecorder.ondataavailable обработчик события (часть MediaStream Recording API) обрабатывает dataavailable событие, позволяет выполнить код в ответ на Blob данные доступные для использования.

Событие dataavailable вызывается когда MediaRecorder доставляет медиа-данные в ваше приложение для использования. Данные предоставляются в Blob объекте. Это происходит в четырёх ситуациях:

  • Когда медиа-поток завершён, любые мультимедийные данные ещё не доставленные в обработчик ondataavailable передаются в одном Blob.
  • When MediaRecorder.stop() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered in a Blob; after this, capturing ends.
  • When MediaRecorder.requestData() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new Blob is created and media capture continues into that blob.
  • If a timeslice property was passed into the MediaRecorder.start() method that started media capture, a dataavailable event is fired every timeslice milliseconds. That means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). So if the method call looked like this — recorder.start(1000); — the dataavailable event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. You can use timeslice alongside MediaRecorder.stop() and MediaRecorder.requestData() to produce multiple same-length blobs plus other shorter blobs as well.

The Blob containing the media data is available in the dataavailable event's data property.


MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })



  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) {



Specification Status Comment
MediaStream Recording
Определение 'MediaRecorder.ondataavailable' в этой спецификации.
Рабочий черновик Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
ondataavailableChrome Полная поддержка 49Edge Нет поддержки НетFirefox Полная поддержка 25IE ? Opera Полная поддержка 36Safari ? WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 25Opera Android Полная поддержка 36Safari iOS ? Samsung Internet Android Полная поддержка Да


Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

See also