SpeechSynthesisUtterance: end — Ereignis · JavaScript-Referenz

Signatur

utterance.addEventListener("end", handler)

Beschreibung

Das end-Ereignis eines SpeechSynthesisUtterance-Objekts tritt ein, sobald die Sprachsynthese die Äußerung fertig gesprochen hat. Du kannst es mit utterance.addEventListener("end", handler) abonnieren oder die Eigenschaft utterance.onend setzen.

Der Handler bekommt ein SpeechSynthesisEvent. Nützliche Eigenschaften sind elapsedTime (vergangene Zeit seit Beginn des Sprechens, laut Spezifikation in Sekunden, in manchen Browsern in Millisekunden), charIndex und utterance (Verweis auf die auslösende Äußerung).

Typische Einsätze:

Die Oberfläche zurücksetzen, z. B. den „Vorlesen“-Knopf wieder aktivieren.
Mehrere Textteile nacheinander abspielen.
Einen Vorlesevorgang in ein Promise einpacken, damit du mit await auf das Ende warten kannst.

Das Ereignis kommt auch dann, wenn die Ausgabe mit speechSynthesis.cancel() abgebrochen wird. Bei Fehlern kommt stattdessen oder zusätzlich ein error-Ereignis. Behandle deshalb beide Fälle.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"end"`.
$handler Pflicht	(event: SpeechSynthesisEvent) => void		Callback, der nach dem Ende der Sprachausgabe aufgerufen wird. Er bekommt ein `SpeechSynthesisEvent` mit `elapsedTime`, `charIndex`, `name` und `utterance`.
$options	boolean \| AddEventListenerOptions	false	Optionen für `addEventListener`, z. B. `{ once: true }` oder `{ signal }`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Ein Rückgabewert des Handlers wird ignoriert.

Beispiele

Ende der Sprachausgabe mit addEventListener erkennen

const utterance = new SpeechSynthesisUtterance('Willkommen bei programmierung.net!');
utterance.lang = 'de-DE';

utterance.addEventListener('end', (event) => {
  console.log(`Fertig nach ${event.elapsedTime} (Zeiteinheit je nach Browser)`);
  console.log('Text:', event.utterance.text);
});

speechSynthesis.speak(utterance);

Fertig nach 2.31 (Zeiteinheit je nach Browser) Text: Willkommen bei programmierung.net!

Vorlese-Knopf per onend zurücksetzen

const button = document.querySelector('#vorlesen');

button.addEventListener('click', () => {
  const text = document.querySelector('article').textContent;
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'de-DE';

  button.disabled = true;
  button.textContent = 'Liest vor …';

  // on-Property statt addEventListener
  utterance.onend = () => {
    button.disabled = false;
    button.textContent = 'Vorlesen';
  };
  utterance.onerror = utterance.onend;

  speechSynthesis.speak(utterance);
});

Vorlesen als Promise mit async/await

const speak = (text, lang = 'de-DE') =>
  new Promise((resolve, reject) => {
    const u = new SpeechSynthesisUtterance(text);
    u.lang = lang;
    u.addEventListener('end', resolve, { once: true });
    u.addEventListener('error', (e) => reject(e.error), { once: true });
    speechSynthesis.speak(u);
  });

const vorlesen = async () => {
  const saetze = ['Schritt eins: Ofen vorheizen.', 'Schritt zwei: Teig kneten.'];
  for (const satz of saetze) {
    await speak(satz);
    console.log('Gesprochen:', satz);
  }
  console.log('Alle Schritte vorgelesen.');
};

vorlesen();

Gesprochen: Schritt eins: Ofen vorheizen. Gesprochen: Schritt zwei: Teig kneten. Alle Schritte vorgelesen.

Listener wieder entfernen

const utterance = new SpeechSynthesisUtterance('Test');
const onEnd = () => console.log('Ende');

utterance.addEventListener('end', onEnd);
// ... später, etwa beim Abbau einer Komponente:
utterance.removeEventListener('end', onEnd);
// Alternative für die on-Property:
utterance.onend = null;

// Wichtig · Fallstricke

Garbage Collection in Chrome: Hält dein Code keinen Verweis mehr auf die Äußerung, kann sie vorzeitig aufgeräumt werden. Dann kommt das end-Ereignis nie an. Speichere die Äußerung deshalb in einer Variable außerhalb der Funktion, bis sie fertig ist.
Lange Texte: Chrome bricht die Ausgabe bei manchen Stimmen nach etwa 15 Sekunden ab, oft ohne end. Teile lange Texte in Sätze auf und lies sie nacheinander vor.
cancel(): Nach speechSynthesis.cancel() kommt je nach Browser end oder error mit error === 'canceled' bzw. 'interrupted'. Deine Logik sollte mit beiden Fällen umgehen können.
elapsedTime: Die Einheit ist nicht in allen Browsern gleich. Laut Spezifikation sind es Sekunden, ältere Chrome-Versionen liefern Millisekunden.
Autoplay-Regeln: Einige Browser starten die Sprachausgabe erst nach einer Nutzerinteraktion. Ohne sie gibt es weder start noch end.
Das Ereignis steigt nicht auf (kein Bubbling) und lässt sich nicht abbrechen.

Siehe auch

SpeechSynthesisUtterance: error SpeechSynthesisUtterance: mark SpeechSynthesisUtterance: pause SpeechSynthesisUtterance: resume SpeechSynthesisUtterance: start SpeechSynthesis: voiceschanged