SpeechSynthesisUtterance: resume — Ereignis · JavaScript-Referenz

Signatur

utterance.addEventListener("resume", handler)

Beschreibung

Das resume-Ereignis gehört zur Web Speech API und wird an einer SpeechSynthesisUtterance ausgelöst, sobald eine zuvor mit speechSynthesis.pause() angehaltene Äußerung durch speechSynthesis.resume() weiterläuft. Das Event-Objekt ist ein SpeechSynthesisEvent.

Registrieren kannst du den Handler entweder mit utterance.addEventListener("resume", handler) oder über die Eigenschaft utterance.onresume = handler. Das Ereignis lässt sich nicht abbrechen (cancelable ist false) und steigt nicht auf (bubbles ist false).

Typische Einsatzfälle sind Vorlese-Funktionen, Barrierefreiheits-Werkzeuge und Sprachassistenten, in denen die Oberfläche den Zustand der Wiedergabe anzeigen soll, etwa einen Pause/Weiter-Schalter, eine Statusanzeige oder eine Zeitmessung. Mit event.charIndex und event.elapsedTime siehst du, an welcher Textstelle und nach wie vielen Millisekunden fortgesetzt wurde.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"resume"`.
$handler Pflicht	(event: SpeechSynthesisEvent) => void		Callback, der beim Fortsetzen aufgerufen wird. Er bekommt ein `SpeechSynthesisEvent` mit `charIndex`, `charLength`, `elapsedTime`, `name` und `utterance`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Entfernen über einen `AbortController`).

Rückgabewert

Typ

void

Beschreibung

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

Beispiele

Fortsetzen mit addEventListener protokollieren

const utterance = new SpeechSynthesisUtterance(
  'Dies ist ein längerer Text, der vorgelesen, pausiert und dann fortgesetzt wird.'
);
utterance.lang = 'de-DE';

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

speechSynthesis.speak(utterance);

// Nach 2 s pausieren, nach 4 s fortsetzen
setTimeout(() => speechSynthesis.pause(), 2000);
setTimeout(() => speechSynthesis.resume(), 4000);

Fortgesetzt bei Zeichen 34 nach 2150 ms

Pause/Weiter-Schalter mit onresume und onpause

const button = document.querySelector('#toggle');
const utterance = new SpeechSynthesisUtterance(document.querySelector('article').textContent);
utterance.lang = 'de-DE';

utterance.onpause = () => { button.textContent = '▶ Weiter'; };
utterance.onresume = () => { button.textContent = '⏸ Pause'; };
utterance.onend = () => { button.textContent = '▶ Vorlesen'; };

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

Listener wieder entfernen (removeEventListener und AbortController)

const utterance = new SpeechSynthesisUtterance('Hallo Welt, dies ist ein Test.');

const onResume = () => console.log('Wiedergabe läuft wieder');
utterance.addEventListener('resume', onResume);

// Variante 1: gezielt entfernen
utterance.removeEventListener('resume', onResume);

// Variante 2: über AbortController
const controller = new AbortController();
utterance.addEventListener('resume', () => console.log('resume (abbrechbar)'), {
  signal: controller.signal
});
controller.abort(); // Listener ist entfernt

// Variante 3: on-Property zurücksetzen
utterance.onresume = null;

// Wichtig · Fallstricke

Kein resume ohne vorherige Pause: Das Ereignis kommt nur, wenn die Äußerung tatsächlich pausiert war. Rufst du speechSynthesis.resume() auf, ohne dass pausiert wurde, passiert nichts.
Browser-Unterschiede: Chrome unter Android und einige Linux-Sprachengines unterstützen pause()/resume() nur eingeschränkt. Dort feuert resume womöglich nie, oder die Wiedergabe startet von vorn. Unter Chrome für Desktop bricht die Ausgabe bei langen Texten nach etwa 15 Sekunden manchmal ab. Als Abhilfe teilst du den Text in kürzere Äußerungen auf.
Safari: charIndex und elapsedTime können im resume-Event 0 oder ungenau sein. Verlass dich für die Fortschrittsanzeige lieber auf das boundary-Ereignis.
Globale Steuerung: pause() und resume() wirken auf die gesamte speechSynthesis-Warteschlange. Das Ereignis erhält aber nur die Äußerung, die gerade gesprochen wird.
Autoplay-Richtlinien: Viele Browser starten die Sprachausgabe nur nach einer Nutzerinteraktion, etwa einem Klick. Löse speak() deshalb in einem Event-Handler aus.
Prüfe die Unterstützung vorab mit 'speechSynthesis' in window.

Siehe auch

SpeechSynthesisUtterance SpeechSynthesisUtterance: pause SpeechSynthesisUtterance: start SpeechSynthesisUtterance: end SpeechSynthesisUtterance: boundary SpeechSynthesis.resume() SpeechSynthesis.pause() SpeechSynthesisEvent