new SpeechSynthesisUtterance() — Methode · JavaScript-Referenz

Signatur

new SpeechSynthesisUtterance(text)

Beschreibung

Der Konstruktor SpeechSynthesisUtterance() erzeugt eine Sprachanforderung (Utterance): ein Objekt, das festlegt, was vorgelesen werden soll und wie. Das Objekt allein erzeugt noch keinen Ton. Erst die Übergabe an speechSynthesis.speak() stellt es in die Warteschlange der Sprachsynthese des Browsers bzw. Betriebssystems.

Nach dem Erzeugen lassen sich Eigenschaften wie lang (BCP-47-Sprachcode, z. B. "de-DE"), voice (ein SpeechSynthesisVoice aus speechSynthesis.getVoices()), rate (0.1–10, Standard 1), pitch (0–2, Standard 1) und volume (0–1, Standard 1) setzen. Außerdem feuert das Objekt Ereignisse wie start, end, error, pause, resume und boundary. Über diese Ereignisse kann man z. B. den Fortschritt anzeigen oder das gerade gesprochene Wort hervorheben.

Typische Einsatzgebiete sind Barrierefreiheit (Vorlesefunktionen), Sprachlern-Apps, akustische Rückmeldungen in Formularen oder Assistenzsystemen und Navigationsansagen. Eine Utterance kann man mehrfach an speak() übergeben. Ändert man ihre Eigenschaften, nachdem die Ausgabe begonnen hat, wirkt sich das erst beim nächsten Vorlesen aus.

Parameter

Name	Typ	Default	Beschreibung
$text	string	""	Der vorzulesende Text. Lässt sich auch später über die Eigenschaft `text` setzen. Laut Spezifikation sind höchstens 32.767 Zeichen erlaubt. SSML wird nur von wenigen Sprachmaschinen unterstützt und sonst ignoriert oder wörtlich vorgelesen.

Rückgabewert

Typ

SpeechSynthesisUtterance

Beschreibung

Eine neue Instanz, die man konfigurieren und mit window.speechSynthesis.speak() abspielen kann.

Beispiele

Einfacher Text auf Deutsch vorlesen

const utterance = new SpeechSynthesisUtterance('Willkommen bei programmierung.net!');
utterance.lang = 'de-DE';
utterance.rate = 1.1;   // etwas schneller
utterance.pitch = 1;    // normale Tonhöhe
utterance.volume = 0.8; // 80 % Lautstärke

utterance.addEventListener('end', () => console.log('Ausgabe beendet'));
window.speechSynthesis.speak(utterance);

Ausgabe beendet

Deutsche Stimme auswählen (Stimmen werden asynchron geladen)

const loadVoices = () => new Promise((resolve) => {
  const voices = speechSynthesis.getVoices();
  if (voices.length) return resolve(voices);
  speechSynthesis.addEventListener('voiceschanged',
    () => resolve(speechSynthesis.getVoices()), { once: true });
});

const speakGerman = async (text) => {
  const voices = await loadVoices();
  const german = voices.find((v) => v.lang.startsWith('de'));
  const utterance = new SpeechSynthesisUtterance(text);
  if (german) utterance.voice = german;
  utterance.lang = german?.lang ?? 'de-DE';
  speechSynthesis.speak(utterance);
  console.log(`Stimme: ${german?.name ?? 'Standard'}`);
};

document.querySelector('#vorlesen')
  .addEventListener('click', () => speakGerman('Ihre Bestellung wurde versendet.'));

Stimme: Google Deutsch

Vorlesen als Promise mit Wort-Hervorhebung

const speak = (text, onWord) => new Promise((resolve, reject) => {
  const u = new SpeechSynthesisUtterance(text);
  u.lang = 'de-DE';
  u.onboundary = (e) => {
    if (e.name === 'word') onWord(text.slice(e.charIndex).split(/\s/)[0]);
  };
  u.onend = resolve;
  u.onerror = (e) => reject(new Error(e.error));
  speechSynthesis.cancel(); // laufende Ausgaben verwerfen
  speechSynthesis.speak(u);
});

document.querySelector('#start').addEventListener('click', async () => {
  try {
    await speak('Hallo liebe Leserinnen und Leser', (w) => console.log('Wort:', w));
    console.log('Fertig');
  } catch (err) {
    console.error('Fehler bei der Sprachausgabe:', err.message);
  }
});

Wort: Hallo Wort: liebe Wort: Leserinnen Wort: und Wort: Leser Fertig

// Wichtig · Fallstricke

Funktionsprüfung: Vor der Nutzung mit 'speechSynthesis' in window prüfen, ob die API vorhanden ist. Die Web Speech API gehört nicht zu Node.js.
Nutzeraktion nötig: Chrome und Safari (vor allem unter iOS) blockieren speak() ohne vorherige Nutzeraktion wie einen Klick. Die Ausgabe schlägt dann still fehl oder löst error mit "not-allowed" aus.
Stimmen laden asynchron: getVoices() liefert beim Seitenaufruf oft ein leeres Array. Deshalb auf das Ereignis voiceschanged warten. Welche Stimmen es gibt und wie sie klingen, hängt stark von Betriebssystem und Browser ab.
Chrome-Eigenheit: Lange Texte werden in Chrome mit Online-Stimmen nach etwa 15 Sekunden abgebrochen. Als Abhilfe den Text in Sätze aufteilen und mehrere Utterances nacheinander einreihen.
Speicherbereinigung: In manchen Browsern feuert end nicht, wenn keine Referenz auf die Utterance mehr besteht. In dem Fall eine Referenz aufbewahren, z. B. in einer Variable im äußeren Gültigkeitsbereich.
Die Ereignisse boundary und mark werden nicht von allen Stimmen unterstützt, insbesondere nicht von Netzwerk- bzw. Cloud-Stimmen.
Datenschutz: Manche Stimmen (z. B. „Google …“) senden den Text zur Verarbeitung an einen Server. Bei sensiblen Inhalten lokale Stimmen bevorzugen, erkennbar an voice.localService === true.

Siehe auch

new SpeechSynthesisEvent() new SpeechSynthesisErrorEvent() new ChannelSplitterNode() new SpeechRecognition() new SpeechRecognitionEvent()