Window: speechSynthesis-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2018 browserübergreifend verfügbar.

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.

In diesem Artikel

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();
};

Web Speech API

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Window: speechSynthesis-Eigenschaft

In diesem Artikel

Wert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN