Window.speechSynthesis — Eigenschaft · JavaScript-Referenz

Signatur

Window.speechSynthesis

Beschreibung

window.speechSynthesis gibt das eine SpeechSynthesis-Objekt des aktuellen Fensters zurück. Es ist der Steuer-Controller für die Sprachausgabe im Browser: Darüber schickt man Äußerungen (SpeechSynthesisUtterance) in eine Warteschlange, pausiert, setzt fort oder bricht sie ab und fragt die verfügbaren Stimmen ab.

Typische Einsatzgebiete sind Vorlese-Funktionen für Artikel, Barrierefreiheits-Hilfen, gesprochenes Feedback in Lern-Apps, Navigationshinweise oder Benachrichtigungen, ohne dass ein externer TTS-Dienst nötig ist. Die eigentliche Sprachsynthese übernimmt das Betriebssystem bzw. der Browser – Qualität und Auswahl der Stimmen hängen also stark von der Plattform ab.

Wichtige Mitglieder des zurückgegebenen Objekts:

speak(utterance), cancel(), pause(), resume() – Steuerung der Warteschlange
getVoices() – Liste der SpeechSynthesisVoice-Objekte
speaking, pending, paused – Statusabfragen
voiceschanged-Ereignis – wird ausgelöst, sobald die Stimmenliste (asynchron) geladen oder geändert wurde

Rückgabewert

Typ

SpeechSynthesis

Beschreibung

Das SpeechSynthesis-Objekt des Fensters. Bei jedem Zugriff wird dieselbe Instanz geliefert.

Beispiele

Einfachen Text vorlesen

if ('speechSynthesis' in window) {
  const utterance = new SpeechSynthesisUtterance('Willkommen auf programmierung.net!');
  utterance.lang = 'de-DE';
  utterance.rate = 1.0;  // Geschwindigkeit 0.1–10
  utterance.pitch = 1.0; // Tonhöhe 0–2
  window.speechSynthesis.speak(utterance);
} else {
  console.log('Sprachausgabe wird nicht unterstützt.');
}

Deutsche Stimme zuverlässig auswählen (voiceschanged)

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 = 'de-DE';
  speechSynthesis.speak(utterance);
  console.log(`Stimme: ${german?.name ?? 'Standard'}`);
};

speakGerman('Die Stimme wurde geladen.');

Stimme: Google Deutsch (abhängig von Browser/System)

Vorlese-Steuerung mit Buttons

const synth = window.speechSynthesis;
const article = document.querySelector('article');

document.querySelector('#play').addEventListener('click', () => {
  if (synth.paused) return synth.resume();
  synth.cancel(); // alte Warteschlange leeren
  const u = new SpeechSynthesisUtterance(article.textContent);
  u.lang = 'de-DE';
  u.addEventListener('end', () => console.log('Fertig vorgelesen'));
  synth.speak(u);
});

document.querySelector('#pause').addEventListener('click', () => {
  if (synth.speaking) synth.pause();
});

document.querySelector('#stop').addEventListener('click', () => synth.cancel());

Fertig vorgelesen

// Wichtig · Fallstricke

Stimmen laden asynchron: getVoices() liefert direkt nach dem Seitenladen in Chrome oft ein leeres Array. Immer auf das voiceschanged-Ereignis warten (Safari/Firefox liefern teils sofort).
Nutzerinteraktion nötig: Viele Browser (v. a. Chrome, iOS Safari) spielen Sprachausgabe erst nach einer Nutzergeste (Klick, Tastendruck) ab; speak() beim Laden bleibt stumm.
Lange Texte: In Chrome bricht die Ausgabe bei sehr langen Äußerungen (ca. 15 s) mitunter ab. Text in Sätze aufteilen und einzeln in die Warteschlange stellen.
Warteschlange überlebt: Die Ausgabe läuft weiter, auch wenn die Komponente entfernt wird – beim Verlassen der Seite oder beim Wechsel der Ansicht speechSynthesis.cancel() aufrufen.
Plattformabhängig: Verfügbare Stimmen, pause()/resume()-Verhalten (unter Android teilweise unzuverlässig) und Netzwerk-Stimmen (localService === false, Text wird ggf. an Server gesendet – Datenschutz!) unterscheiden sich stark.
Mit 'speechSynthesis' in window auf Unterstützung prüfen; in Node.js und Web Workern ist die Eigenschaft nicht vorhanden.

Siehe auch

Window.caches Window.credentialless Window.opener Window.personalbar Window.scheduler