Window: speechSynthesis-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

Die schreibgeschützte speechSynthesis-Eigenschaft des Window-Objekts gibt ein SpeechSynthesis-Objekt zurück, das den Einstieg in die Nutzung der Web Speech API-Sprachausgabefunktionalität ermöglicht.

Wert

Ein SpeechSynthesis-Objekt.

Beispiele

In unserem einfachen Sprachsynthesizer-Demo greifen wir zunächst auf den SpeechSynthesis-Controller mit window.speechSynthesis zu. Nachdem wir einige notwendige Variablen definiert haben, rufen wir eine Liste der verfügbaren Stimmen mit SpeechSynthesis.getVoices() ab und füllen damit ein Auswahlmenü, damit der Benutzer auswählen kann, welche Stimme er möchte.

Innerhalb des inputForm.onsubmit-Handlers verhindern wir die Formularübermittlung mit preventDefault(), erstellen eine neue Instanz von SpeechSynthesisUtterance, die den Text aus dem Text-<input> enthält, setzen die Stimme der Äußerung auf die im <select>-Element ausgewählte Stimme und starten die Äußerung über die Methode SpeechSynthesis.speak().

js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

function populateVoiceList() {
  voices = synth.getVoices();

  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  utterThis.voice = voices.find((v) => v.name === selectedOption);
  synth.speak(utterThis);
  inputTxt.blur();
};

Spezifikationen

Specification
Web Speech API
# tts-section

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
speechSynthesis

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch