SpeechSynthesis — Schnittstelle · JavaScript-Referenz

Signatur

interface SpeechSynthesis extends EventTarget

Beschreibung

SpeechSynthesis ist der zentrale Controller für die Sprachsynthese (Text-to-Speech) im Browser. Es gibt keinen Konstruktor: Die einzige Instanz erreicht man über window.speechSynthesis. Der eigentliche Text samt Stimme, Sprache, Tempo, Tonhöhe und Lautstärke wird in einem SpeechSynthesisUtterance-Objekt beschrieben und mit speechSynthesis.speak() in eine Warteschlange gestellt.

Wichtige Mitglieder:

Eigenschaften (nur lesbar): speaking (es wird gerade gesprochen), pending (Äußerungen warten in der Warteschlange), paused (Ausgabe ist pausiert).
Methoden: speak(utterance), pause(), resume(), cancel() (leert die gesamte Warteschlange) und getVoices() (liefert ein Array von SpeechSynthesisVoice).
Event: voiceschanged – wird ausgelöst, sobald sich die Liste der Stimmen ändert bzw. erstmals geladen ist (auch als onvoiceschanged).

Typische Einsatzgebiete sind Vorlesefunktionen für Barrierefreiheit, akustisches Feedback in Web-Apps, Sprachlern-Anwendungen oder Navigationshinweise. Die Stimmen stammen vom Betriebssystem oder vom Browser-Anbieter (teils cloudbasiert), daher unterscheiden sich Auswahl und Klang je nach Plattform deutlich.

Parameter

Name	Typ	Default	Beschreibung
$utterance Pflicht	SpeechSynthesisUtterance		Parameter von `speak()`: die zu sprechende Äußerung mit Text, `lang`, `voice`, `rate` (0.1–10), `pitch` (0–2) und `volume` (0–1).

Beispiele

Text vorlesen mit deutscher Stimme

const synth = window.speechSynthesis;

const sprich = (text) => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'de-DE';
  utterance.rate = 1.1;
  utterance.pitch = 1;
  utterance.onend = () => console.log('Fertig gesprochen');
  synth.speak(utterance);
};

sprich('Willkommen auf programmierung.net!');

Fertig gesprochen

Stimmen zuverlässig laden (voiceschanged)

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

const voices = await ladeStimmen();
const deutsch = voices.filter((v) => v.lang.startsWith('de'));
console.log(deutsch.map((v) => `${v.name} (${v.lang})`));

const u = new SpeechSynthesisUtterance('Hallo mit ausgewählter Stimme');
u.voice = deutsch[0] ?? null;
speechSynthesis.speak(u);

["Google Deutsch (de-DE)", "Anna (de-DE)"] // abhängig von Browser/OS

Wiedergabe-Steuerung per Buttons

const synth = speechSynthesis;

document.querySelector('#play').addEventListener('click', () => {
  if (synth.paused) return synth.resume();
  synth.cancel(); // laufende Ausgabe verwerfen
  const text = document.querySelector('article').textContent;
  synth.speak(new SpeechSynthesisUtterance(text));
});

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

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

console.log({ speaking: synth.speaking, pending: synth.pending, paused: synth.paused });

{ speaking: false, pending: false, paused: false }

// Wichtig · Fallstricke

Stimmen laden asynchron: In Chrome liefert getVoices() beim ersten Aufruf oft ein leeres Array. Immer auf voiceschanged warten; Safari/Firefox liefern die Liste teils sofort und lösen das Event evtl. nie aus – daher beide Wege kombinieren.
Autoplay-Richtlinien: Viele Browser (v. a. iOS Safari, neuere Chrome-Versionen) verlangen eine Nutzerinteraktion, bevor speak() etwas ausgibt.
Lange Texte: Chrome bricht die Ausgabe bei langen Äußerungen nach ca. 15 Sekunden teilweise ab (bekannter Bug). Text besser in Sätze aufteilen und einzeln in die Warteschlange stellen.
Warteschlange: speak() hängt an, statt zu unterbrechen. Für „jetzt sofort sprechen“ vorher cancel() aufrufen. pause()/resume() funktionieren auf Android teilweise nicht zuverlässig.
Datenschutz: Stimmen mit localService === false senden den Text an einen Server des Anbieters – für sensible Inhalte lokale Stimmen bevorzugen.
Feature-Erkennung: 'speechSynthesis' in window prüfen; in Node.js ist die API nicht verfügbar.

Siehe auch

SpeechSynthesisEvent SpeechSynthesisVoice SpeechGrammar SpeechGrammarList SpeechSynthesisUtterance