SpeechSynthesisEvent.name — Eigenschaft · JavaScript-Referenz

Signatur

SpeechSynthesisEvent.name

Beschreibung

Die Eigenschaft name des Interfaces SpeechSynthesisEvent ist nur lesbar. Sie liefert zusätzliche Informationen zu bestimmten Ereignissen, die während der Sprachausgabe einer SpeechSynthesisUtterance auftreten. (Anders als die MDN-Kurzbeschreibung nahelegt, gehört sie zum Ereignisobjekt und nicht zur Utterance selbst.)

Ihr Inhalt hängt vom Ereignistyp ab:

boundary: Art der erreichten Grenze, also "word" (Wortgrenze) oder "sentence" (Satzgrenze).
mark: Wert des name-Attributs eines SSML-<mark>-Elements, das die Sprachausgabe gerade erreicht hat.
Andere Ereignisse (start, end, pause, resume, error): in der Regel ein leerer String.

Typische Anwendungen sind das Hervorheben des gerade gesprochenen Wortes (Karaoke-Effekt, Vorlesefunktion für Barrierefreiheit), Fortschrittsanzeigen auf Satzebene oder das Synchronisieren von Animationen mit bestimmten Stellen im Text. Zusammen mit charIndex und charLength lässt sich die aktuelle Position im Text genau bestimmen.

Rückgabewert

Typ

string

Beschreibung

"word" oder "sentence" bei boundary-Ereignissen, den Namen der SSML-Markierung bei mark-Ereignissen, sonst meist "".

Beispiele

Wort- und Satzgrenzen protokollieren

const text = 'Hallo Welt. Wie geht es dir?';
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';

utterance.addEventListener('boundary', (event) => {
  // event.name ist "word" oder "sentence"
  const stueck = text.slice(event.charIndex, event.charIndex + (event.charLength || 0));
  console.log(`${event.name} bei Index ${event.charIndex}: "${stueck}"`);
});

speechSynthesis.speak(utterance);

word bei Index 0: "Hallo" word bei Index 6: "Welt" ... (Ausgabe abhängig von Browser und Stimme)

Aktuell gesprochenes Wort hervorheben

// HTML: <p id="vorlesen"></p>
const text = 'Barrierefreiheit beginnt mit gutem Vorlesen.';
const ausgabe = document.querySelector('#vorlesen');
ausgabe.textContent = text;

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

utterance.onboundary = (event) => {
  if (event.name !== 'word') return; // Satzgrenzen ignorieren
  const start = event.charIndex;
  // charLength fehlt in manchen Browsern – dann bis zum nächsten Leerzeichen
  const ende = event.charLength
    ? start + event.charLength
    : (text.indexOf(' ', start) === -1 ? text.length : text.indexOf(' ', start));

  ausgabe.innerHTML = '';
  const mark = document.createElement('mark');
  mark.textContent = text.slice(start, ende);
  ausgabe.append(text.slice(0, start), mark, text.slice(ende));
};

utterance.onend = () => { ausgabe.textContent = text; };

speechSynthesis.speak(utterance);

SSML-Markierungen auswerten (mark-Ereignis)

const ssml = `<speak version="1.0" xml:lang="de-DE">
  Erster Abschnitt. <mark name="abschnitt2"/> Zweiter Abschnitt.
</speak>`;

const utterance = new SpeechSynthesisUtterance(ssml);

utterance.addEventListener('mark', (event) => {
  console.log('Markierung erreicht:', event.name);
});

utterance.addEventListener('end', (event) => {
  console.log('Name beim end-Ereignis:', JSON.stringify(event.name));
});

speechSynthesis.speak(utterance);

Markierung erreicht: abschnitt2 (nur bei SSML-Unterstützung) Name beim end-Ereignis: ""

// Wichtig · Fallstricke

SSML kaum unterstützt: Die meisten Browser werten SSML nicht aus und lesen die Tags im schlimmsten Fall laut vor. mark-Ereignisse treten deshalb in der Praxis fast nie auf. Verlass dich nicht auf sie.
boundary hängt von der Stimme ab: Ob überhaupt boundary-Ereignisse ausgelöst werden, hängt vom Sprachsynthese-Dienst ab. Bei vielen Online-/Netzwerkstimmen (z. B. Google-Stimmen in Chrome) und auf einigen Android-Geräten kommen keine an. Satzgrenzen ("sentence") werden oft gar nicht gemeldet.
Uneinheitliche Begleitwerte: charLength fehlt in älteren Browsern oder ist 0. Ermittle die Wortlänge dann selbst anhand von charIndex.
Die Eigenschaft ist nur lesbar. Eigene Werte lassen sich nur über den Konstruktor new SpeechSynthesisEvent(type, { utterance, name }) setzen, etwa für Tests.
Die Web Speech API ist kein fester W3C-Standard, sondern ein Community-Group-Entwurf. Prüfe vorher, ob sie verfügbar ist: 'speechSynthesis' in window.

Siehe auch

SpeechSynthesisEvent.charIndex SpeechSynthesisEvent.utterance SpeechSynthesisEvent.charLength SpeechSynthesisEvent.elapsedTime SpeechSynthesisVoice.name