SpeechSynthesisUtterance.voice — Eigenschaft · JavaScript-Referenz

Signatur

SpeechSynthesisUtterance.voice

Beschreibung

Mit der Eigenschaft voice einer SpeechSynthesisUtterance legst du fest, welche Stimme den Text beim Aufruf von speechSynthesis.speak() vorliest. Du musst ihr ein SpeechSynthesisVoice-Objekt zuweisen, das von speechSynthesis.getVoices() stammt. Selbst gebaute Objekte oder Zeichenketten funktionieren nicht.

Der Standardwert ist null. Dann wählt der Browser eine passende Stimme aus, meist anhand der Eigenschaft lang der Äußerung oder der Sprache des Dokuments. Wenn du eine bestimmte Stimme setzt, hat sie Vorrang vor lang.

Welche Stimmen es gibt, hängt vom Betriebssystem, vom Browser und von installierten Sprachpaketen ab. Manche Stimmen laufen lokal (localService: true), andere über einen Netzwerkdienst. Wähle deshalb nicht fest eine Stimme nach Namen aus, sondern nach Sprache, und sieh eine Ausweichlösung vor.

Die Stimme musst du setzen, bevor du speak() aufrufst. Eine Änderung während der Wiedergabe wirkt sich nicht auf die laufende Äußerung aus.

Rückgabewert

Typ

SpeechSynthesisVoice | null

Beschreibung

Die eingestellte Stimme als SpeechSynthesisVoice-Objekt mit den Eigenschaften name, lang, voiceURI, localService und default. Ist keine Stimme gesetzt, wird null zurückgegeben.

Beispiele

Deutsche Stimme auswählen und Text vorlesen

const utterance = new SpeechSynthesisUtterance('Hallo, willkommen auf programmierung.net!');
const voices = speechSynthesis.getVoices();

// Erste deutsche Stimme suchen
const german = voices.find((v) => v.lang.startsWith('de'));
if (german) {
  utterance.voice = german;
}
utterance.lang = 'de-DE'; // Ausweichlösung, falls keine Stimme gefunden wurde

console.log(utterance.voice?.name ?? 'Standardstimme');
speechSynthesis.speak(utterance);

Google Deutsch (Name variiert je nach System)

Warten, bis die Stimmen asynchron geladen sind

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

const speak = async (text, lang = 'de-DE') => {
  const voices = await loadVoices();
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice =
    voices.find((v) => v.lang === lang) ??
    voices.find((v) => v.default) ??
    null;
  utterance.lang = lang;
  speechSynthesis.speak(utterance);
  return utterance.voice;
};

speak('Die Stimmen sind jetzt geladen.').then((v) => console.log(v?.lang));

de-DE

Auswahlliste für Stimmen im Formular

// HTML: <select id="voice-select"></select> <button id="say">Vorlesen</button>
const select = document.querySelector('#voice-select');

const fillVoices = () => {
  select.innerHTML = '';
  speechSynthesis.getVoices().forEach((voice, index) => {
    const option = new Option(`${voice.name} (${voice.lang})`, index);
    select.append(option);
  });
};
fillVoices();
speechSynthesis.onvoiceschanged = fillVoices;

document.querySelector('#say').addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance('Das ist eine Stimmprobe.');
  utterance.voice = speechSynthesis.getVoices()[select.value] ?? null;
  speechSynthesis.speak(utterance);
});

// Wichtig · Fallstricke

Stimmen werden asynchron geladen: In Chrome gibt getVoices() beim ersten Aufruf oft ein leeres Array zurück. Warte in diesem Fall auf das Ereignis voiceschanged. Safari und Firefox liefern die Liste meist sofort.
Nur Objekte aus getVoices() sind gültig. Weist du einen String oder ein nachgebautes Objekt zu, wird es je nach Browser ignoriert oder es wird ein TypeError ausgelöst.
Stimmennamen unterscheiden sich zwischen Plattformen, zum Beispiel „Anna“ unter macOS, „Microsoft Katja“ unter Windows und „Google Deutsch“ in Chrome. Filtere deshalb nach lang.
Netzwerkstimmen (localService === false) schicken den Text an einen externen Dienst. Das ist beim Datenschutz zu beachten, wenn der Text sensible Inhalte enthält.
Die Liste der Stimmen kann für Fingerprinting genutzt werden. Einige Browser schränken sie deshalb ein, zum Beispiel Firefox mit privacy.resistFingerprinting.
Browser: Chrome, Edge, Safari und Firefox unterstützen die Eigenschaft. Unter Linux fehlen ohne installiertes Sprachsynthese-Paket (z. B. speech-dispatcher) oft alle Stimmen. Prüfe vorher mit 'speechSynthesis' in window, ob die API vorhanden ist.

Siehe auch

SpeechSynthesisEvent.charLength SpeechSynthesisUtterance.volume SpeechSynthesisUtterance.pitch SpeechSynthesisUtterance.rate SpeechSynthesisUtterance.lang