MediaRecorder: stop イベント

Baseline 広く利用可能

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

stop イベントは、MediaRecorder.stop() メソッドを呼び出した結果として、またはキャプチャしているメディアストリームが終了したときに発生します。いずれの場合も、stop イベントの前に dataavailable イベントがあり、それまでにキャプチャされた Blob をアプリで使用できるようにします。

構文

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

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

onstop = (event) => {};

イベント型

一般的な Event です。

例

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);
};