MediaRecorder: dataavailable イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年4月以降、すべてのブラウザーで利用可能です。

dataavailable イベントは、MediaRecorder がメディアデータをアプリで使用するために引き渡すときに発生します。データはデータを含む Blob オブジェクトで提供されます。これは次の 4 つの状況で発生します。

メディアストリームが終了すると、ondataavailable ハンドラーにまだ引き渡されていないメディアデータはすべて単一の Blob で渡されます。
MediaRecorder.stop() を呼び出すと、収録を開始してから、または最後に dataavailable イベントが発生してからキャプチャされたすべてのメディアデータが Blob で引き渡されます。この後、キャプチャは終了します。
MediaRecorder.requestData() を呼び出すと、収録を開始してから、または最後に dataavailable イベントが発生してからキャプチャされたすべてのメディアデータが引き渡されます。その後、新しい Blob が作成され、メディアのキャプチャがその blob に対して続行されます。
timeslice プロパティをメディアキャプチャを開始した MediaRecorder.start() メソッドに渡した場合は、timeslice ミリ秒ごとに dataavailable イベントが発生します。つまり、各 blob は特定の期間を持つことになります（最後の blob を除いてで、最後のイベント以降に残っているものは何でもということになるので、これはもっと短いかもしれません）。そのため、メソッド呼び出しが次のようになっていれば — recorder.start(1000); — dataavailable イベントはメディアキャプチャの毎秒後に発生し、イベントハンドラーは一秒の長さのメディアデータの blob で毎秒呼ばれるでしょう。 timeslice を MediaRecorder.stop() および MediaRecorder.requestData() と共に使用して、複数の同じ長さの blob と他の短い blob を生成することもできます。

メモ: メディアデータを含む Blob は、dataavailable イベントの data プロパティで利用できます。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

ondataavailable = (event) => {};

イベント型

一般的な Event です。

例

const chunks = [];

mediaRecorder.onstop = (e) => {
  console.log("MediaRecorder.stop() 呼び出し後に利用可能なデータ。");

  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("レコーダー停止");
};

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