SpeechSynthesisUtterance

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.

* Some parts of this feature may have varying levels of support.

Das SpeechSynthesisUtterance Interface der Web Speech API repräsentiert eine Sprachaufforderung. Es enthält den Inhalt, den der Sprachdienst lesen soll, und Informationen darüber, wie er gelesen werden soll (z. B. Sprache, Tonhöhe und Lautstärke).

Konstruktor

SpeechSynthesisUtterance(): Gibt eine neue Instanz eines SpeechSynthesisUtterance-Objekts zurück.

Instanz-Eigenschaften

SpeechSynthesisUtterance erbt auch Eigenschaften von seinem übergeordneten Interface, EventTarget.

SpeechSynthesisUtterance.lang: Ruft die Sprache der Äußerung ab und legt sie fest.
SpeechSynthesisUtterance.pitch: Ruft die Tonhöhe ab und legt fest, mit der die Äußerung gesprochen wird.
SpeechSynthesisUtterance.rate: Ruft die Geschwindigkeit ab und legt fest, mit der die Äußerung gesprochen wird.
SpeechSynthesisUtterance.text: Ruft den Text ab und legt ihn fest, der synthetisiert wird, wenn die Äußerung gesprochen wird.
SpeechSynthesisUtterance.voice: Ruft die Stimme ab und legt fest, die für das Sprechen der Äußerung verwendet wird.
SpeechSynthesisUtterance.volume: Ruft die Lautstärke ab und legt fest, mit der die Äußerung gesprochen wird.

Ereignisse

Hören Sie diese Ereignisse mit addEventListener() oder indem Sie einen Ereignis-Listener der oneventname-Eigenschaft dieses Interfaces zuweisen.

boundary: Wird ausgelöst, wenn die gesprochene Äußerung einen Wort- oder Satzgrenze erreicht. Ebenfalls verfügbar über die onboundary-Eigenschaft.
end: Wird ausgelöst, wenn die Äußerung fertig gesprochen wurde. Ebenfalls verfügbar über die onend-Eigenschaft.
error: Wird ausgelöst, wenn ein Fehler auftritt, der verhindert, dass die Äußerung erfolgreich gesprochen wird. Ebenfalls verfügbar über die onerror-Eigenschaft
mark: Wird ausgelöst, wenn die gesprochene Äußerung ein benanntes SSML „mark“-Tag erreicht. Ebenfalls verfügbar über die onmark-Eigenschaft.
pause: Wird ausgelöst, wenn die Äußerung unterwegs pausiert wird. Ebenfalls verfügbar über die onpause-Eigenschaft.
resume: Wird ausgelöst, wenn eine pausierte Äußerung fortgesetzt wird. Ebenfalls verfügbar über die onresume-Eigenschaft.
start: Wird ausgelöst, wenn die Äußerung zu sprechen begonnen hat. Ebenfalls verfügbar über die onstart-Eigenschaft.

Beispiele

In unserem grundlegenden Sprachsynthesizer-Demo erhalten wir zuerst eine Referenz zum SpeechSynthesis Controller mit window.speechSynthesis. Nach der Definition einiger notwendiger Variablen rufen wir eine Liste der verfügbaren Stimmen mit SpeechSynthesis.getVoices() ab und füllen ein Auswahlmenü damit, sodass der Benutzer die gewünschte Stimme auswählen kann.

Innerhalb des inputForm.onsubmit Handlers verhindern wir, dass das Formular abgeschickt wird, indem wir preventDefault() verwenden. Mit dem constructor erstellen wir eine neue Instanz der Äußerung, die den Text aus dem Text <input> enthält, setzen die voice 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 (const [i, voice] of voices.entries()) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.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();
};

Spezifikationen

Specification
Web Speech API # speechsynthesisutterance

Browser-Kompatibilität

Siehe auch

Web Speech API