SpeechSynthesisUtterance.text — Eigenschaft · JavaScript-Referenz

Signatur

SpeechSynthesisUtterance.text

Beschreibung

Die Eigenschaft text einer SpeechSynthesisUtterance enthält den Inhalt, den die Sprachsynthese vorliest. Sie kann direkt über den Konstruktor (new SpeechSynthesisUtterance("Hallo")) oder nachträglich per Zuweisung gesetzt werden. Beim Lesen gibt sie den aktuell hinterlegten Text als Zeichenkette zurück.

Typische Anwendungen sind Vorlesefunktionen für Barrierefreiheit, akustische Rückmeldungen in Web-Apps (z. B. „Bestellung gespeichert“) oder Sprachlern-Anwendungen. Laut Spezifikation darf der Text höchstens 32.767 Zeichen lang sein. Ein Ausspruch-Objekt lässt sich mehrfach verwenden: Man ändert einfach text und übergibt das Objekt erneut an speechSynthesis.speak().

Die Spezifikation erlaubt grundsätzlich auch ein SSML-Dokument als Text. In der Praxis werten die meisten Browser SSML jedoch nicht aus und lesen die Tags stattdessen wörtlich vor oder ignorieren sie. Für zuverlässige Ergebnisse sollte man daher reinen Text verwenden und Tempo, Tonhöhe und Stimme über rate, pitch und voice steuern.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: der vorzulesende Text (reiner Text, theoretisch auch SSML). Nicht-String-Werte werden in eine Zeichenkette umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuell hinterlegte Text des Ausspruchs. Ohne Angabe im Konstruktor ist das eine leere Zeichenkette.

Beispiele

Text setzen und vorlesen

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

console.log(utterance.text);
speechSynthesis.speak(utterance);

Willkommen auf programmierung.net!

Eingabe aus einem Textfeld vorlesen

// HTML: <textarea id="eingabe"></textarea> <button id="vorlesen">Vorlesen</button>
const eingabe = document.querySelector('#eingabe');
const button = document.querySelector('#vorlesen');
const utterance = new SpeechSynthesisUtterance();
utterance.lang = 'de-DE';

button.addEventListener('click', () => {
  const inhalt = eingabe.value.trim();
  if (!inhalt) return;
  speechSynthesis.cancel(); // laufende Ausgabe abbrechen
  utterance.text = inhalt;
  speechSynthesis.speak(utterance);
});

Langen Text satzweise aufteilen

const langerText = 'Erster Satz. Zweiter Satz! Dritter Satz?';
const saetze = langerText.match(/[^.!?]+[.!?]+/g) ?? [langerText];

for (const satz of saetze) {
  const u = new SpeechSynthesisUtterance(satz.trim());
  u.lang = 'de-DE';
  u.addEventListener('start', () => console.log('Spreche:', u.text));
  speechSynthesis.speak(u); // Aussprüche werden in die Warteschlange gestellt
}

Spreche: Erster Satz. Spreche: Zweiter Satz! Spreche: Dritter Satz?

// Wichtig · Fallstricke

Änderungen während der Ausgabe: Wird text geändert, nachdem speak() aufgerufen wurde, wirkt sich das in der Regel nicht auf die laufende oder bereits eingereihte Ausgabe aus. Dazu muss man neu sprechen lassen.
Längenlimit: Höchstens 32.767 Zeichen. Chrome bricht bei manchen (Online-)Stimmen lange Texte außerdem nach etwa 15 Sekunden ab. Lange Texte sollte man deshalb in Sätze oder Absätze aufteilen.
SSML: Wird von kaum einem Browser unterstützt. Tags werden oft wörtlich vorgelesen.
Autoplay-Regeln: Viele Browser (vor allem Chrome und Safari auf iOS) starten die Sprachausgabe erst nach einer Nutzerinteraktion, etwa einem Klick.
Sprache: Setze lang passend zum Text, sonst liest die Standardstimme deutschen Text womöglich mit englischer Aussprache.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Welche Stimmen verfügbar sind und wie gut sie klingen, hängt vom Betriebssystem ab. Prüfe die Unterstützung mit 'speechSynthesis' in window.

Siehe auch

SpeechSynthesisErrorEvent.error SpeechSynthesisUtterance.lang SpeechSynthesisUtterance.rate SpeechSynthesisUtterance.pitch SpeechSynthesisUtterance.voice