SpeechSynthesis.speak() — Methode · JavaScript-Referenz

Signatur

SpeechSynthesis.prototype.speak(utterance)

Beschreibung

Mit speechSynthesis.speak() lässt man Text vom Browser vorlesen (Text-to-Speech). Die Methode bekommt ein SpeechSynthesisUtterance-Objekt. Darin stehen der Text und Einstellungen wie Stimme (voice), Sprache (lang), Geschwindigkeit (rate), Tonhöhe (pitch) und Lautstärke (volume).

Die Äußerung wird nicht sofort gesprochen, sondern hinten an eine Warteschlange angehängt. Sie kommt erst dran, wenn alle vorher eingereihten Äußerungen fertig sind. Soll ein neuer Text sofort zu hören sein, leert man die Warteschlange vorher mit speechSynthesis.cancel().

Die Methode kehrt sofort zurück und gibt keinen Wert zurück. Den Ablauf verfolgt man über die Events der Äußerung: start, end, error, boundary (Wort- und Satzgrenzen), pause, resume und mark. Typische Einsatzfälle sind Vorlesefunktionen für die Barrierefreiheit, Sprachlern-Apps, Navigationsansagen und akustisches Feedback.

Parameter

Name	Typ	Default	Beschreibung
$utterance Pflicht	SpeechSynthesisUtterance		Die Äußerung, die gesprochen werden soll: Text plus Einstellungen wie `voice`, `lang`, `rate`, `pitch` und `volume`. Wird kein `SpeechSynthesisUtterance` übergeben, wirft die Methode einen `TypeError`.

Beispiele

Einfachen Text vorlesen

const utterance = new SpeechSynthesisUtterance('Hallo und willkommen auf programmierung.net!');
utterance.lang = 'de-DE';
utterance.rate = 1;   // 0.1 bis 10
utterance.pitch = 1;  // 0 bis 2

speechSynthesis.speak(utterance);

Deutsche Stimme wählen und Warteschlange nutzen

// Stimmen werden oft erst nach dem Laden bereitgestellt
const getVoices = () => new Promise((resolve) => {
  const voices = speechSynthesis.getVoices();
  if (voices.length) return resolve(voices);
  speechSynthesis.addEventListener('voiceschanged',
    () => resolve(speechSynthesis.getVoices()), { once: true });
});

const vorlesen = async (saetze) => {
  const voices = await getVoices();
  const deutsch = voices.find((v) => v.lang.startsWith('de'));

  for (const satz of saetze) {
    const u = new SpeechSynthesisUtterance(satz);
    if (deutsch) u.voice = deutsch;
    u.lang = 'de-DE';
    speechSynthesis.speak(u); // wird nacheinander abgespielt
  }
  console.log('In Warteschlange:', speechSynthesis.pending);
};

vorlesen(['Erster Satz.', 'Zweiter Satz.', 'Dritter Satz.']);

In Warteschlange: true

Vorlese-Button mit Promise, Abbruch und Events

const sprich = (text) => new Promise((resolve, reject) => {
  speechSynthesis.cancel(); // laufende Ausgabe stoppen und Warteschlange leeren
  const u = new SpeechSynthesisUtterance(text);
  u.lang = 'de-DE';
  u.addEventListener('start', () => console.log('Start'));
  u.addEventListener('boundary', (e) => {
    if (e.name === 'word') console.log('Wort ab Index', e.charIndex);
  });
  u.addEventListener('end', () => resolve());
  u.addEventListener('error', (e) => reject(new Error(e.error)));
  speechSynthesis.speak(u);
});

document.querySelector('#vorlesen').addEventListener('click', async () => {
  const text = document.querySelector('article').textContent;
  try {
    await sprich(text);
    console.log('Fertig vorgelesen');
  } catch (err) {
    console.error('Sprachausgabe fehlgeschlagen:', err.message);
  }
});

Start Wort ab Index 0 ... Fertig vorgelesen

// Wichtig · Fallstricke

Nutzeraktion erforderlich: Chrome und Safari blockieren die Sprachausgabe oft, solange der Nutzer noch nicht mit der Seite interagiert hat (Autoplay-Regeln). speak() sollte daher aus einem Klick- oder Tastatur-Handler heraus aufgerufen werden. Andernfalls bleibt es still oder es kommt ein error-Event mit "not-allowed".
Stimmen laden asynchron: getVoices() liefert beim ersten Aufruf häufig ein leeres Array. Auf das Event voiceschanged warten.
Warteschlange: Mehrere speak()-Aufrufe werden nacheinander abgespielt und unterbrechen sich nicht. Für eine sofortige Ausgabe vorher cancel() aufrufen.
Garbage-Collection-Fehler: In manchen Chrome-Versionen feuert end nicht, wenn keine Referenz mehr auf die Äußerung besteht. Die Äußerung deshalb z. B. in einer Variablen oder einem Array festhalten.
Lange Texte: Chrome bricht mit Online-Stimmen nach etwa 15 Sekunden ab. Lange Texte in Sätze aufteilen und einzeln einreihen.
Unterschiede zwischen Plattformen: Welche Stimmen es gibt, wie sie klingen und ob boundary-Events kommen, hängt vom Betriebssystem ab. Online-Stimmen (localService === false) schicken den Text an einen externen Dienst. Das ist bei vertraulichen Inhalten datenschutzrelevant.
Unterstützung prüfen: Vor der Nutzung mit 'speechSynthesis' in window testen. In Node.js ist die API nicht verfügbar.

Siehe auch

SpeechSynthesis.pause() SpeechSynthesis.cancel() SpeechSynthesis.resume() SpeechSynthesis.getVoices() new SpeechSynthesisEvent()