Signatur
Beschreibung
SpeechSynthesisUtterance beschreibt, was und wie gesprochen werden soll. Ein Objekt enthält den Text (text) und die Einstellungen für die Ausgabe: lang (BCP-47-Sprachcode wie "de-DE"), voice (ein SpeechSynthesisVoice-Objekt), pitch (Tonhöhe, 0–2), rate (Sprechtempo, 0,1–10) und volume (Lautstärke, 0–1). Das Objekt allein spricht noch nichts. Erst speechSynthesis.speak(utterance) reiht es in die Warteschlange der Sprachsynthese ein.
Weil das Interface von EventTarget erbt, kann man auf den Ablauf reagieren: start, end, pause, resume, error, boundary (an Wort- oder Satzgrenzen) und mark (bei SSML-Markierungen). Die Events lassen sich per addEventListener oder über die passenden Eigenschaften wie onend oder onerror abonnieren. Das ist praktisch, um Buttons zu steuern, gesprochene Wörter hervorzuheben oder mehrere Ausgaben nacheinander abzuspielen.
Typische Einsatzgebiete sind Barrierefreiheit (Inhalte vorlesen), Sprachlern-Apps, akustische Rückmeldungen in Formularen oder Dashboards und Vorlese-Funktionen für Artikel. Ein Objekt lässt sich mehrfach an speak() übergeben. Änderungen an den Eigenschaften, während die Ausgabe schon läuft, wirken aber meist erst beim nächsten Aufruf.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $text | string | "" | Konstruktor-Argument für new SpeechSynthesisUtterance(text): der Text, der gesprochen werden soll. Er lässt sich später über die Eigenschaft text ändern. Die Länge ist auf 32.767 Zeichen begrenzt. |
Rückgabewert
speechSynthesis.speak() übergeben werden kann.Beispiele
Einfache Sprachausgabe auf Deutsch
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
window.speechSynthesis.speak(utterance);Deutsche Stimme auswählen (Stimmen werden asynchron geladen)
const getVoices = () => new Promise((resolve) => {
const voices = speechSynthesis.getVoices();
if (voices.length) return resolve(voices);
speechSynthesis.addEventListener('voiceschanged',
() => resolve(speechSynthesis.getVoices()), { once: true });
});
const sprich = async (text) => {
const voices = await getVoices();
const utterance = new SpeechSynthesisUtterance(text);
utterance.voice = voices.find((v) => v.lang.startsWith('de')) ?? null;
utterance.lang = utterance.voice?.lang ?? 'de-DE';
speechSynthesis.speak(utterance);
console.log('Stimme:', utterance.voice?.name ?? 'Standard');
};
document.querySelector('#vorlesen').addEventListener('click', () => sprich('Guten Tag!'));Events: Button steuern und gesprochene Wörter mitverfolgen
const button = document.querySelector('#vorlesen');
const artikel = document.querySelector('article').textContent;
button.addEventListener('click', () => {
speechSynthesis.cancel(); // laufende Ausgaben abbrechen
const utterance = new SpeechSynthesisUtterance(artikel);
utterance.lang = 'de-DE';
utterance.addEventListener('start', () => { button.disabled = true; });
utterance.addEventListener('boundary', (event) => {
if (event.name === 'word') {
const wort = artikel.slice(event.charIndex).split(/\s/)[0];
console.log('Spricht gerade:', wort);
}
});
utterance.onend = () => { button.disabled = false; };
utterance.onerror = (event) => {
console.error('Fehler bei der Sprachausgabe:', event.error);
button.disabled = false;
};
speechSynthesis.speak(utterance);
});Mehrere Sätze nacheinander mit Promise abspielen
const sprichAsync = (text, lang = 'de-DE') => new Promise((resolve, reject) => {
const u = new SpeechSynthesisUtterance(text);
u.lang = lang;
u.onend = resolve;
u.onerror = (e) => reject(new Error(e.error));
speechSynthesis.speak(u);
});
const ablauf = async () => {
await sprichAsync('Schritt eins: Formular ausfüllen.');
await sprichAsync('Schritt zwei: Absenden klicken.');
console.log('Anleitung beendet');
};
document.querySelector('#hilfe').addEventListener('click', ablauf);// Wichtig · Fallstricke
- Nutzeraktion nötig: Chrome und Safari spielen die Sprachausgabe oft nur ab, wenn sie durch eine Nutzeraktion ausgelöst wurde, etwa einen Klick. Direkt beim Laden der Seite passiert meist nichts. Ist die Ausgabe blockiert, meldet das
error-Event"not-allowed". - Stimmen werden asynchron geladen:
speechSynthesis.getVoices()liefert beim ersten Aufruf häufig ein leeres Array. Deshalb auf dasvoiceschanged-Event warten. Welche Stimmen es gibt, hängt von Betriebssystem und Browser ab. Online-Stimmen, etwa „Google Deutsch“, schicken den Text unter Umständen an einen Server. Das ist bei sensiblen Daten wichtig. - Wertebereiche:
rate0,1–10,pitch0–2,volume0–1. Werte außerhalb des Bereichs führen je nach Browser zu Fehlern oder werden begrenzt. Nicht jede Stimme unterstützt alle Werte. - Garbage-Collection-Fehler: In älteren Chrome-Versionen wurde
endmanchmal nicht ausgelöst, wenn keine Referenz mehr auf das Objekt bestand. Abhilfe: das Objekt in einer Variablen außerhalb der Funktion halten. Außerdem bricht Chrome lange Texte nach rund 15 Sekunden ab. Lange Texte daher in einzelne Sätze aufteilen. - SSML wird im Feld
textoffiziell erlaubt, von den meisten Browsern aber nicht ausgewertet. Die Tags werden entfernt oder mitgesprochen.boundary-Events werden nicht von allen Stimmen ausgelöst. - Vor dem Einsatz prüfen, ob die API vorhanden ist:
if ('speechSynthesis' in window). Das Interface ist im Browser verfügbar, aber nicht in Node.js.