MediaRecorder: resume — Ereignis · JavaScript-Referenz

Signatur

mediaRecorder.addEventListener("resume", handler)

Beschreibung

Das resume-Ereignis eines MediaRecorder wird ausgelöst, sobald eine zuvor mit pause() angehaltene Aufnahme durch resume() fortgesetzt wird. Zu diesem Zeitpunkt ist mediaRecorder.state wieder "recording", und neue Mediendaten werden an denselben Datenstrom angehängt – es entsteht also keine neue Datei, sondern die bestehende Aufnahme läuft weiter.

Einen Handler registrieren Sie entweder mit addEventListener("resume", handler) oder über die Eigenschaft onresume. Das Ereignis ist ein einfaches Event ohne zusätzliche Daten, es lässt sich nicht abbrechen und steigt nicht auf (kein Bubbling).

Typische Anwendungsfälle sind das Aktualisieren der Benutzeroberfläche (Aufnahme-Anzeige wieder rot, „Pause“-Knopf aktivieren), das Weiterlaufen eines Aufnahme-Timers oder Protokollierung. Da resume() selbst synchron zurückkehrt, das Ereignis aber asynchron ausgelöst wird, sollte UI-Logik, die den tatsächlichen Zustand widerspiegeln soll, im Ereignis-Handler stehen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"resume"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Fortsetzen der Aufnahme aufgerufen wird. Erhält ein einfaches `Event`-Objekt; `event.target` ist der `MediaRecorder`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück; der Handler-Rückgabewert wird ignoriert.

Beispiele

Pausieren und Fortsetzen mit addEventListener

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

recorder.addEventListener('pause', () => console.log('Pausiert:', recorder.state));
recorder.addEventListener('resume', () => console.log('Fortgesetzt:', recorder.state));

recorder.start();
setTimeout(() => recorder.pause(), 2000);
setTimeout(() => recorder.resume(), 4000);

Pausiert: paused Fortgesetzt: recording

Aufnahme-Timer mit onresume weiterlaufen lassen

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const recorder = new MediaRecorder(stream);
const anzeige = document.querySelector('#dauer');
let sekunden = 0;
let timerId = null;

const timerStarten = () => {
  timerId = setInterval(() => {
    sekunden++;
    anzeige.textContent = `${sekunden} s`;
  }, 1000);
};
const timerStoppen = () => clearInterval(timerId);

recorder.onstart = timerStarten;
recorder.onpause = timerStoppen;
recorder.onresume = timerStarten;
recorder.onstop = timerStoppen;

document.querySelector('#pauseBtn').addEventListener('click', () => {
  recorder.state === 'recording' ? recorder.pause() : recorder.resume();
});

recorder.start();

Listener per AbortController entfernen

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

const beiResume = () => console.log('Aufnahme läuft weiter');
recorder.addEventListener('resume', beiResume, { signal: controller.signal });

// Später: Listener wieder entfernen (Alternative: removeEventListener)
controller.abort();
// oder: recorder.removeEventListener('resume', beiResume);
// bzw. bei on-Property: recorder.onresume = null;

// Wichtig · Fallstricke

resume() wirft einen InvalidStateError, wenn state "inactive" ist – dann wird auch kein resume-Ereignis ausgelöst. Prüfen Sie vorher recorder.state.
Ist die Aufnahme bereits im Zustand "recording", hat resume() keine Wirkung, und es wird kein Ereignis ausgelöst.
Das Ereignis wird asynchron ausgelöst; Code direkt nach resume() läuft vor dem Handler.
Während der Pause entstehen keine Daten; die fertige Datei enthält keinen „stillen“ Abschnitt, sondern einen nahtlosen Übergang. Manche Player zeigen bei WebM-Dateien danach eine fehlerhafte Gesamtdauer an.
Kompatibilität: Chrome, Edge, Firefox und Safari (ab 14.1) unterstützen MediaRecorder samt pause/resume. getUserMedia erfordert einen sicheren Kontext (HTTPS) und die Zustimmung der Nutzer.

Siehe auch

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