SpeechSynthesisEvent.utterance — Eigenschaft · JavaScript-Referenz

Signatur

SpeechSynthesisEvent.utterance

Beschreibung

Die Eigenschaft utterance des Interfaces SpeechSynthesisEvent verweist auf das SpeechSynthesisUtterance-Objekt, dessen Ausgabe das Ereignis ausgelöst hat – etwa start, end, boundary, pause, resume oder mark. Ein Fehlerereignis (SpeechSynthesisErrorEvent) erbt diese Eigenschaft ebenfalls.

Nützlich ist sie vor allem dann, wenn ein einziger Handler für mehrere Äußerungen verwendet wird, zum Beispiel beim Vorlesen eines Textes, der in Absätze aufgeteilt ist. Über event.utterance lässt sich dann feststellen, welcher Abschnitt gerade beginnt oder endet, und auf dessen Eigenschaften wie text, lang, voice, rate oder pitch zugreifen.

In Kombination mit charIndex und charLength aus dem boundary-Ereignis lässt sich über event.utterance.text das aktuell gesprochene Wort ermitteln, etwa um es beim Vorlesen hervorzuheben.

Rückgabewert

Typ

SpeechSynthesisUtterance

Beschreibung

Das Äußerungsobjekt, zu dem das Ereignis gehört. In der Regel ist es identisch mit event.target.

Beispiele

Äußerung im end-Ereignis auslesen

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

utterance.addEventListener('end', (event) => {
  console.log('Fertig gesprochen:', event.utterance.text);
  console.log('Gleiches Objekt?', event.utterance === utterance);
});

speechSynthesis.speak(utterance);

Fertig gesprochen: Hallo, willkommen auf programmierung.net! Gleiches Objekt? true

Gemeinsamer Handler für mehrere Absätze

const absaetze = [
  'Erster Absatz des Artikels.',
  'Zweiter Absatz mit weiteren Details.',
  'Dritter und letzter Absatz.'
];

const onStart = (event) => {
  const index = Number(event.utterance.dataIndex);
  console.log(`Lese Absatz ${index + 1} von ${absaetze.length}`);
};

absaetze.forEach((text, i) => {
  const u = new SpeechSynthesisUtterance(text);
  u.lang = 'de-DE';
  u.dataIndex = i; // eigene Zusatzinformation am Objekt
  u.onstart = onStart;
  speechSynthesis.speak(u);
});

Lese Absatz 1 von 3 Lese Absatz 2 von 3 Lese Absatz 3 von 3

Aktuelles Wort beim boundary-Ereignis ermitteln

const u = new SpeechSynthesisUtterance('Die Web Speech API kann Text vorlesen.');
u.lang = 'de-DE';

u.addEventListener('boundary', (event) => {
  if (event.name !== 'word') return;
  const { text } = event.utterance;
  const laenge = event.charLength || (text.slice(event.charIndex).search(/\s|$/));
  const wort = text.substr(event.charIndex, laenge);
  console.log('Aktuelles Wort:', wort);
});

speechSynthesis.speak(u);

Aktuelles Wort: Die Aktuelles Wort: Web Aktuelles Wort: Speech …

// Wichtig · Fallstricke

Die Eigenschaft ist nur lesbar; eine Zuweisung wird ignoriert (im Strict Mode ggf. TypeError). Die Eigenschaften der zurückgegebenen Äußerung sind zwar änderbar, wirken sich aber auf eine bereits laufende Ausgabe nicht aus.
Wird ein SpeechSynthesisUtterance-Objekt frühzeitig vom Garbage Collector entfernt (z. B. nur lokal referenziert), feuern in manchen Chromium-Versionen end-Ereignisse nicht zuverlässig. Eine Referenz außerhalb der Funktion halten.
boundary-Ereignisse und charLength werden nicht von allen Stimmen/Browsern unterstützt (insbesondere bei Netzwerkstimmen in Chrome oder unter Firefox/Linux).
Die Web Speech API (Synthese) wird von allen modernen Browsern unterstützt; verfügbare Stimmen hängen jedoch vom Betriebssystem ab. Vorab mit 'speechSynthesis' in window prüfen.

Siehe auch

SpeechSynthesisErrorEvent.error SpeechSynthesisEvent.charIndex SpeechSynthesisEvent.name SpeechSynthesisEvent.charLength SpeechSynthesisEvent.elapsedTime