DasSpeechSynthesis-Interface derWeb Speech API ist das Steuerungsinterface für den Sprachdienst; es kann verwendet werden, um Informationen über die auf dem Gerät verfügbaren Synthesestimmen abzurufen, Sprache zu starten und zu pausieren sowie weitere Befehle auszuführen.

Instanz-Eigenschaften

SpeechSynthesis erbt auch Eigenschaften von seinem ElterninterfaceEventTarget.

SpeechSynthesis.pausedSchreibgeschützt

Ein boolescher Wert, dertrue zurückgibt, wenn sich dasSpeechSynthesis-Objekt in einem pausierten Zustand befindet.

SpeechSynthesis.pendingSchreibgeschützt

Ein boolescher Wert, dertrue zurückgibt, wenn die Äußerungswarteschlange noch nicht gesprochene Äußerungen enthält.

SpeechSynthesis.speakingSchreibgeschützt

Ein boolescher Wert, dertrue zurückgibt, wenn eine Äußerung gerade gesprochen wird, selbst wennSpeechSynthesis in einem pausierten Zustand ist.

Instanz-Methoden

SpeechSynthesis erbt auch Methoden von seinem ElterninterfaceEventTarget.

SpeechSynthesis.cancel()

Entfernt alle Äußerungen aus der Äußerungswarteschlange.

SpeechSynthesis.getVoices()

Gibt eine Liste vonSpeechSynthesisVoice-Objekten zurück, die alle auf dem aktuellen Gerät verfügbaren Stimmen repräsentieren.

SpeechSynthesis.pause()

Versetzt dasSpeechSynthesis-Objekt in einen pausierten Zustand.

SpeechSynthesis.resume()

Versetzt dasSpeechSynthesis-Objekt in einen nicht pausierten Zustand: setzt es fort, wenn es bereits pausiert war.

SpeechSynthesis.speak()

Fügt eineutterance zur Äußerungswarteschlange hinzu; sie wird gesprochen, wenn alle vorher in der Warteschlange befindlichen Äußerungen gesprochen wurden.

Ereignisse

Hören Sie auf dieses Ereignis mitaddEventListener() oder indem Sie einen Ereignis-Listener deroneventname-Eigenschaft dieses Interfaces zuweisen.

voiceschanged

Wird ausgelöst, wenn sich die Liste derSpeechSynthesisVoice-Objekte geändert hat, die von der MethodeSpeechSynthesis.getVoices() zurückgegeben würden.Auch über dieonvoiceschanged-Eigenschaft verfügbar.

Beispiele

Zuerst ein Beispiel:

let utterance = new SpeechSynthesisUtterance("Hello world!");speechSynthesis.speak(utterance);

Nun betrachten wir ein umfangreicheres Beispiel. In unseremSprachsynthesizer-Demo holen wir uns zuerst eine Referenz zum SpeechSynthesis-Controller mitwindow.speechSynthesis. Nachdem wir einige notwendige Variablen definiert haben, rufen wir mitSpeechSynthesis.getVoices() eine Liste der verfügbaren Stimmen ab und füllen ein Auswahlmenü damit, sodass der Benutzer die gewünschte Stimme auswählen kann.

IminputForm.onsubmit-Handler stoppen wir das Formular-Absenden mitpreventDefault(), erstellen eine neueSpeechSynthesisUtterance-Instanz, die den Text aus dem<input> enthält, setzen die Stimme der Äußerung auf die im<select>-Element ausgewählte Stimme und starten die Äußerung über dieSpeechSynthesis.speak()-Methode.

const synth = window.speechSynthesis;const inputForm = document.querySelector("form");const inputTxt = document.querySelector(".txt");const voiceSelect = document.querySelector("select");const pitch = document.querySelector("#pitch");const pitchValue = document.querySelector(".pitch-value");const rate = document.querySelector("#rate");const rateValue = document.querySelector(".rate-value");let voices = [];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");  for (const voice of voices) {    if (voice.name === selectedOption) {      utterThis.voice = voice;    }  }  utterThis.pitch = pitch.value;  utterThis.rate = rate.value;  synth.speak(utterThis);  inputTxt.blur();};

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Web Speech API