SpeechSynthesisUtterance: pause — Ereignis · JavaScript-Referenz

Signatur

utterance.addEventListener("pause", handler)

Beschreibung

Das pause-Ereignis gehört zur Web Speech API und wird an einer SpeechSynthesisUtterance ausgelöst, sobald deren Wiedergabe unterbrochen wird. Meistens passiert das durch einen Aufruf von window.speechSynthesis.pause(), während diese Äußerung gerade vorgelesen wird.

Du kannst das Ereignis auf zwei Arten abonnieren: mit utterance.addEventListener("pause", handler) oder über die Eigenschaft utterance.onpause = handler. Der Handler bekommt ein SpeechSynthesisEvent. Dessen Eigenschaften charIndex und elapsedTime sagen dir, an welcher Stelle im Text und nach wie viel Zeit angehalten wurde.

Typische Einsatzfälle sind Vorlese-Funktionen mit Wiedergabesteuerung: Du aktualisierst die Oberfläche (etwa den Wechsel von „Pause“ zu „Fortsetzen“), merkst dir die Leseposition oder zeigst einen Status an. Das Gegenstück ist das resume-Ereignis. Es wird ausgelöst, wenn die Wiedergabe mit speechSynthesis.resume() weiterläuft.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier immer `"pause"`.
$handler Pflicht	(event: SpeechSynthesisEvent) => void		Callback-Funktion, die beim Anhalten aufgerufen wird. Sie bekommt ein `SpeechSynthesisEvent` mit `charIndex`, `charLength`, `elapsedTime`, `name` und `utterance`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`, damit du den Listener später per `AbortController` entfernen kannst.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein SpeechSynthesisEvent.

Beispiele

Pause per addEventListener erkennen

const utterance = new SpeechSynthesisUtterance(
  'Dies ist ein längerer Beispieltext, der vorgelesen und zwischendurch angehalten wird.'
);
utterance.lang = 'de-DE';

utterance.addEventListener('pause', (event) => {
  console.log(`Pausiert bei Zeichen ${event.charIndex} nach ${Math.round(event.elapsedTime)} ms`);
});

speechSynthesis.speak(utterance);

// Nach 2 Sekunden anhalten
setTimeout(() => speechSynthesis.pause(), 2000);

Pausiert bei Zeichen 34 nach 2003 ms

Pause über die onpause-Eigenschaft

const utterance = new SpeechSynthesisUtterance('Hallo, willkommen auf programmierung.net!');
utterance.lang = 'de-DE';

utterance.onpause = () => {
  console.log('Wiedergabe angehalten');
};

speechSynthesis.speak(utterance);
setTimeout(() => speechSynthesis.pause(), 1000);

// Handler wieder entfernen
// utterance.onpause = null;

Wiedergabe angehalten

Wiedergabe-Button mit Pause/Fortsetzen

const button = document.querySelector('#play-toggle');
const text = document.querySelector('#article').textContent;

const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';

const controller = new AbortController();
const { signal } = controller;

utterance.addEventListener('start', () => { button.textContent = '⏸ Pause'; }, { signal });
utterance.addEventListener('pause', () => { button.textContent = '▶ Fortsetzen'; }, { signal });
utterance.addEventListener('resume', () => { button.textContent = '⏸ Pause'; }, { signal });
utterance.addEventListener('end', () => {
  button.textContent = '▶ Vorlesen';
  controller.abort(); // alle Listener entfernen
}, { signal });

button.addEventListener('click', () => {
  if (speechSynthesis.paused) {
    speechSynthesis.resume();
  } else if (speechSynthesis.speaking) {
    speechSynthesis.pause();
  } else {
    speechSynthesis.speak(utterance);
  }
});

// Wichtig · Fallstricke

Browser-Unterschiede: Die Web Speech API wird zwar breit unterstützt, aber pause()/resume() verhalten sich nicht überall gleich. Auf Android-Chrome und bei manchen Stimmen kann pause() die Wiedergabe komplett abbrechen oder wirkungslos bleiben. Das pause-Ereignis kommt dann gar nicht oder unzuverlässig an.
Pause auf Wortebene: Viele Sprach-Engines halten erst am Ende des aktuellen Wortes oder Satzes an. charIndex und elapsedTime sind deshalb nur Näherungswerte.
Chrome-Timeout: In Chrome auf dem Desktop bricht die Ausgabe bei langen Texten oft nach etwa 15 Sekunden ab. Eine gängige Umgehung ist, den Text in kürzere Äußerungen aufzuteilen.
Kein Ereignis ohne laufende Ausgabe: Rufst du speechSynthesis.pause() auf, bevor die Äußerung begonnen hat (sie steht also noch in der Warteschlange), bekommt diese Äußerung kein pause-Ereignis.
cancel() ist keine Pause: speechSynthesis.cancel() löst kein pause aus, sondern beendet die Wiedergabe. Je nach Browser folgt darauf end oder error (mit interrupted/canceled).
Nur ein onpause-Handler: Eine neue Zuweisung an onpause überschreibt den vorherigen Handler. Wenn du mehrere Listener brauchst, nimm addEventListener.

Siehe auch

SpeechSynthesisUtterance SpeechSynthesis.pause() SpeechSynthesis.resume() SpeechSynthesisEvent SpeechSynthesisUtterance: mark SpeechSynthesis: voiceschanged