SpeechSynthesisUtterance

SpeechSynthesisUtterance()

Gibt eine neue SpeechSynthesisUtterance-Objektinstanz zurück.

SpeechSynthesisUtterance erbt auch Eigenschaften von seiner übergeordneten Schnittstelle, EventTarget.

SpeechSynthesisUtterance.lang

Ruft die Sprache der Äußerung ab und legt diese fest.

SpeechSynthesisUtterance.pitch

Ruft die Tonhöhe ab, mit der die Äußerung gesprochen wird, und legt diese fest.

SpeechSynthesisUtterance.rate

Ruft die Geschwindigkeit ab, mit der die Äußerung gesprochen wird, und legt diese fest.

SpeechSynthesisUtterance.text

Ruft den Text ab, der synthetisiert wird, wenn die Äußerung gesprochen wird, und legt diesen fest.

SpeechSynthesisUtterance.voice

Ruft die Stimme ab, die zum Sprechen der Äußerung verwendet wird, und legt diese fest.

SpeechSynthesisUtterance.volume

Ruft die Lautstärke ab, mit der die Äußerung gesprochen wird, und legt diese fest.

Diese Ereignisse können mit addEventListener() abgehört werden oder durch Zuweisung eines Ereignis-Listeners an die Eigenschaft oneventname dieser Schnittstelle.

boundary

Wird ausgelöst, wenn die gesprochene Äußerung eine Wort- oder Satzgrenze erreicht. Auch über die onboundary-Eigenschaft verfügbar.

end

Wird ausgelöst, wenn die Äußerung beendet ist. Auch über die onend-Eigenschaft verfügbar.

error

Wird ausgelöst, wenn ein Fehler auftritt, der verhindert, dass die Äußerung erfolgreich gesprochen wird. Auch über die onerror-Eigenschaft verfügbar.

mark

Wird ausgelöst, wenn die gesprochene Äußerung einen benannten SSML-"mark"-Tag erreicht. Auch über die onmark-Eigenschaft verfügbar.

pause

Wird ausgelöst, wenn die Äußerung in der Mitte angehalten wird. Auch über die onpause-Eigenschaft verfügbar.

resume

Wird ausgelöst, wenn eine pausierte Äußerung fortgesetzt wird. Auch über die onresume-Eigenschaft verfügbar.

start

Wird ausgelöst, wenn die Äußerung begonnen hat, gesprochen zu werden. Auch über die onstart-Eigenschaft verfügbar.

In unserem grundlegenden Sprachsynthesedemo holen wir uns zunächst einen Verweis auf den SpeechSynthesis-Controller mit window.speechSynthesis. Nachdem wir einige notwendige Variablen definiert haben, rufen wir eine Liste der verfügbaren Stimmen mit SpeechSynthesis.getVoices() ab und füllen ein Auswahlmenü, sodass der Benutzer die gewünschte Stimme auswählen kann.

Im Handler inputForm.onsubmit verhindern wir das Absenden des Formulars mit preventDefault(), verwenden den Konstruktor, um eine neue Instanz der Äußerung zu erstellen, die den Text aus dem Text-<input> enthält, setzen die voice-Eigenschaft der Äußerung auf die im <select>-Element ausgewählte Stimme und starten die Äußerung über die Methode SpeechSynthesis.speak().

const synth = window.speechSynthesis;

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

let voices;

function loadVoices() {
  voices = synth.getVoices();
  for (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;
    option.value = i;
    voiceSelect.appendChild(option);
  }
}

// in Google Chrome the voices are not ready on page load
if ("onvoiceschanged" in synth) {
  synth.onvoiceschanged = loadVoices;
} else {
  loadVoices();
}

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

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  utterThis.voice = voices[voiceSelect.value];
  synth.speak(utterThis);
  inputTxt.blur();
};

• Web Speech API