MediaRecorder.pause() — Methode · JavaScript-Referenz

Signatur

MediaRecorder.prototype.pause()

Beschreibung

Mit pause() unterbrechen Sie eine laufende Aufnahme, die mit MediaRecorder.start() gestartet wurde. Anders als bei stop() wird die Aufnahme dabei nicht abgeschlossen. Der Rekorder nimmt nur vorübergehend keine Daten mehr aus dem MediaStream auf. Wenn Sie danach resume() aufrufen, läuft die Aufnahme nahtlos in derselben Datei weiter. Die pausierte Zeit fehlt einfach in der fertigen Aufnahme.

Beim Aufruf passiert Folgendes:

Ist state gleich "inactive", wird ein DOMException vom Typ InvalidStateError ausgelöst.
Ist state bereits "paused", passiert nichts.
Sonst wird state sofort auf "paused" gesetzt. Der Rekorder hört auf, Mediendaten zu sammeln, und löst asynchron das Ereignis pause aus.

Typische Einsatzfälle sind Sprachmemos, Bildschirmaufnahmen oder Video-Tutorials mit einer Schaltfläche „Pause/Fortsetzen“. Ein weiterer Fall: Die Aufnahme wird automatisch angehalten, wenn der Tab in den Hintergrund wechselt oder das Mikrofon stummgeschaltet wird. Der zugrunde liegende MediaStream läuft dabei weiter, Kamera und Mikrofon bleiben also aktiv.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Den neuen Zustand lesen Sie über recorder.state ab ("paused"), die Benachrichtigung kommt über das Ereignis pause.

Beispiele

Sprachaufnahme mit Pause- und Fortsetzen-Schaltfläche

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

recorder.addEventListener('dataavailable', (e) => chunks.push(e.data));
recorder.addEventListener('pause', () => console.log('Aufnahme pausiert'));
recorder.addEventListener('resume', () => console.log('Aufnahme läuft weiter'));

const toggleBtn = document.querySelector('#toggle');

document.querySelector('#start').addEventListener('click', () => recorder.start());

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

Aufnahme pausiert Aufnahme läuft weiter

Sicher pausieren – InvalidStateError vermeiden

const safePause = (recorder) => {
  if (recorder.state !== 'recording') {
    console.warn(`Pause nicht möglich, Zustand: ${recorder.state}`);
    return false;
  }
  recorder.pause();
  return true;
};

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

safePause(recorder);        // noch nicht gestartet
recorder.start();
console.log(safePause(recorder), recorder.state);

Pause nicht möglich, Zustand: inactive true paused

Aufnahme automatisch pausieren, wenn der Tab verborgen wird

const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
recorder.start(1000); // alle 1000 ms ein Datenblock

document.addEventListener('visibilitychange', () => {
  if (document.hidden && recorder.state === 'recording') {
    recorder.pause();
  } else if (!document.hidden && recorder.state === 'paused') {
    recorder.resume();
  }
});

recorder.onpause = () => console.log('Pausiert um', new Date().toLocaleTimeString());

Pausiert um 14:32:07

// Wichtig · Fallstricke

InvalidStateError: Wenn Sie pause() vor start() oder nach stop() aufrufen, also bei state === "inactive", wird eine Ausnahme ausgelöst. Prüfen Sie deshalb vorher recorder.state.
Kein Datenblock beim Pausieren: pause() löst kein dataavailable aus. Wenn Sie beim Pausieren die bisherigen Daten brauchen, rufen Sie vorher requestData() auf.
Stream bleibt aktiv: Kamera und Mikrofon werden nicht freigegeben, die Aufnahmeanzeige des Browsers bleibt also sichtbar. Um die Geräte wirklich freizugeben, beenden Sie die Spuren mit track.stop().
Zeitstempel: Pausierte Abschnitte fehlen in der Aufnahme, die Datei wird aber nicht in einzelne Teile aufgespalten. Bei WebM-Dateien fehlen je nach Browser Angaben zur Gesamtdauer. Das liegt nicht an pause(), sondern am Container-Format.
Ereignis ist asynchron: state ändert sich sofort, das Ereignis pause kommt aber erst in einem späteren Task.
Kompatibilität: Wird von Chrome, Edge, Firefox und Safari (ab 14.1) unterstützt. Welche Formate (mimeType) funktionieren, ist je nach Browser verschieden. Prüfen Sie das mit MediaRecorder.isTypeSupported().

Siehe auch

MediaRecorder.resume() MediaRecorder.start() MediaRecorder.stop() MediaRecorder.requestData() MediaRecorder.isTypeSupported()