Start · Sprachen · JavaScript · Referenz · SpeechSynthesis.pause()

SpeechSynthesis.pause()

Methode

Pausiert die Sprachausgabe des <code>SpeechSynthesis</code>-Objekts. Mit <code>resume()</code> geht es an derselben Stelle weiter.

seit JavaScript Baseline: alle modernen Browser (seit ca. 2018) Kategorie: webapi

Signatur

SpeechSynthesis.prototype.pause()

Beschreibung

Die Methode pause() des Interfaces SpeechSynthesis hält die laufende Sprachausgabe an. Sie wird über das globale Objekt window.speechSynthesis aufgerufen und betrifft die gesamte Warteschlange. Die Äußerung, die gerade gesprochen wird (SpeechSynthesisUtterance), wird unterbrochen, und alle weiteren Äußerungen in der Warteschlange bleiben erhalten.

Nach dem Aufruf ist speechSynthesis.paused gleich true. Auf der betroffenen Äußerung wird das Event pause ausgelöst. Mit resume() läuft die Ausgabe weiter, und zwar an der Stelle, an der sie angehalten wurde. Anders als cancel() leert pause() die Warteschlange also nicht.

Typische Einsatzfälle sind Vorlese-Funktionen mit Pause- und Weiter-Knopf, Barrierefreiheits-Werkzeuge oder das Anhalten der Ausgabe, wenn der Tab in den Hintergrund wechselt (visibilitychange). Du kannst pause() auch aufrufen, wenn gerade nichts gesprochen wird. Dann wird der Zustand trotzdem auf „pausiert“ gesetzt, und neu hinzugefügte Äußerungen starten erst nach resume().

Rückgabewert

Typ
void
Beschreibung
Kein Rückgabewert (undefined).

Beispiele

Vorlesen mit Pause- und Weiter-Knopf

// HTML: <button id="play">Vorlesen</button> <button id="toggle">Pause</button>
const synth = window.speechSynthesis;
const toggleBtn = document.querySelector('#toggle');

document.querySelector('#play').addEventListener('click', () => {
  synth.cancel(); // alte Warteschlange leeren
  const u = new SpeechSynthesisUtterance('Willkommen bei programmierung.net. Dies ist ein längerer Vorlesetext.');
  u.lang = 'de-DE';
  synth.speak(u);
  toggleBtn.textContent = 'Pause';
});

toggleBtn.addEventListener('click', () => {
  if (synth.paused) {
    synth.resume();
    toggleBtn.textContent = 'Pause';
  } else if (synth.speaking) {
    synth.pause();
    toggleBtn.textContent = 'Weiter';
  }
});

Auf die Events pause und resume reagieren

const synth = window.speechSynthesis;
const u = new SpeechSynthesisUtterance('Ein Satz, der gleich unterbrochen wird.');
u.lang = 'de-DE';

u.addEventListener('pause', (e) => {
  console.log(`Pausiert nach ${e.elapsedTime.toFixed(0)} ms bei Zeichen ${e.charIndex}`);
});
u.addEventListener('resume', () => console.log('Fortgesetzt'));

synth.speak(u);
setTimeout(() => synth.pause(), 1000);
setTimeout(() => synth.resume(), 3000);
Pausiert nach 1000 ms bei Zeichen 0 Fortgesetzt

Ausgabe beim Tab-Wechsel automatisch anhalten

document.addEventListener('visibilitychange', () => {
  const synth = window.speechSynthesis;
  if (document.hidden && synth.speaking && !synth.paused) {
    synth.pause();
  } else if (!document.hidden && synth.paused) {
    synth.resume();
  }
});

// Wichtig · Fallstricke

  • Zustand bleibt erhalten: Hast du pause() aufgerufen, bleibt die Synthese pausiert, auch für später per speak() hinzugefügte Äußerungen. Vor einem Neustart solltest du deshalb resume() oder cancel() aufrufen.
  • Browser-Unterschiede: Auf Android (Chrome) wirkt pause() bei manchen Stimmen wie cancel(), oder es passiert gar nichts. Der Wert von charIndex im pause-Event ist oft ungenau (häufig 0). Die Genauigkeit hängt von der Sprach-Engine des Betriebssystems ab.
  • Chrome-Eigenheit: Bei langen Texten bricht Chrome die Ausgabe nach etwa 15 Sekunden ab. Ein verbreiteter Workaround ruft regelmäßig pause() und direkt danach resume() auf. Besser ist es, lange Texte in mehrere Äußerungen aufzuteilen.
  • Stimmen und Cloud: Wird eine entfernte Stimme (localService === false) genutzt, kann es beim Pausieren und Fortsetzen spürbar verzögern.
  • Prüfe die Unterstützung mit 'speechSynthesis' in window, bevor du die Methode aufrufst.