MediaRecorder: pause — Ereignis · JavaScript-Referenz

Signatur

mediaRecorder.addEventListener("pause", handler)

Beschreibung

Das pause-Ereignis wird ausgelöst, sobald eine laufende Aufnahme per MediaRecorder.pause() angehalten wurde. Der Browser setzt zuerst state auf "paused" und löst danach asynchron das Ereignis aus. Im Handler hat recorder.state daher schon den Wert "paused".

Es handelt sich um ein einfaches Event ohne eigene Zusatzdaten. Das Ereignis steigt nicht auf (kein Bubbling) und lässt sich nicht abbrechen. Du kannst es mit addEventListener("pause", handler) abonnieren oder über die Eigenschaft onpause setzen.

Typische Einsatzfälle sind Änderungen an der Oberfläche, zum Beispiel ein Aufnahme-Symbol ausblenden, einen Timer anhalten oder die Schaltfläche „Fortsetzen“ aktivieren. Dafür solltest du auf das Ereignis reagieren und die Oberfläche nicht direkt nach dem Aufruf von pause() ändern. So passt die Oberfläche auch dann zum tatsächlichen Zustand, wenn die Aufnahme an anderer Stelle im Code pausiert wurde.

Das Gegenstück ist das Ereignis resume, das nach MediaRecorder.resume() ausgelöst wird.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, immer `"pause"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Pausieren aufgerufen wird. Er bekommt ein einfaches `Event`, dessen `target` der betroffene `MediaRecorder` ist.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `once` oder `signal` (Listener über einen `AbortController` entfernen).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt.

Beispiele

Pause per addEventListener erkennen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);

recorder.addEventListener('pause', (event) => {
  console.log('Aufnahme pausiert, Status:', event.target.state);
});

recorder.start();
// Nach 2 Sekunden pausieren
setTimeout(() => recorder.pause(), 2000);

Aufnahme pausiert, Status: paused

Oberfläche mit onpause und onresume steuern

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const recorder = new MediaRecorder(stream);
const indicator = document.querySelector('#rec-indicator');
const toggleBtn = document.querySelector('#toggle');

recorder.onpause = () => {
  indicator.textContent = '⏸ Pausiert';
  toggleBtn.textContent = 'Fortsetzen';
};

recorder.onresume = () => {
  indicator.textContent = '● Aufnahme läuft';
  toggleBtn.textContent = 'Pause';
};

toggleBtn.addEventListener('click', () => {
  if (recorder.state === 'recording') recorder.pause();
  else if (recorder.state === 'paused') recorder.resume();
});

recorder.start();

Aufnahmedauer ohne Pausen messen und Listener entfernen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
const controller = new AbortController();

let elapsed = 0;
let startedAt = 0;

recorder.addEventListener('start', () => { startedAt = performance.now(); }, { signal: controller.signal });
recorder.addEventListener('resume', () => { startedAt = performance.now(); }, { signal: controller.signal });
recorder.addEventListener('pause', () => {
  elapsed += performance.now() - startedAt;
  console.log(`Bisher aufgenommen: ${(elapsed / 1000).toFixed(1)} s`);
}, { signal: controller.signal });

recorder.addEventListener('stop', () => {
  controller.abort(); // entfernt alle oben registrierten Listener
  stream.getTracks().forEach((t) => t.stop());
});

recorder.start();
setTimeout(() => recorder.pause(), 3000);
setTimeout(() => recorder.stop(), 5000);

Bisher aufgenommen: 3.0 s

// Wichtig · Fallstricke

Nur bei echtem Zustandswechsel: Wenn der Recorder schon "paused" ist, macht pause() nichts und löst kein weiteres Ereignis aus. Ist der Recorder im Zustand "inactive", wirft pause() einen InvalidStateError.
Asynchron: Das Ereignis wird erst nach dem Aufruf von pause() ausgelöst, nicht während des Aufrufs. Code direkt nach pause() läuft also vor dem Handler.
Kein automatisches dataavailable: Beim Pausieren werden keine Daten ausgegeben. Um die bisher aufgenommenen Daten zu bekommen, rufe requestData() auf.
Nicht mit anderen Pausen verwechseln: Dieses Ereignis hängt nicht mit dem pause-Ereignis von HTMLMediaElement zusammen, also dem Pausieren der Wiedergabe von <video> oder <audio>. Auch das Stummschalten eines Tracks (track.enabled = false) löst es nicht aus.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, in Safari erst ab 14.1. getUserMedia funktioniert nur in sicheren Kontexten (HTTPS oder localhost).

Siehe auch

MediaRecorder MediaRecorder.pause() MediaRecorder.state EventSource: open MediaRecorder: resume