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.

Die SpeechSynthesisUtterance-Schnittstelle der Web Speech API stellt eine Sprachaufforderung dar. Sie enthält den Inhalt, den der Sprachdienst vorlesen soll, sowie Informationen darüber, wie dies geschehen soll (z. B. Sprache, Tonhöhe und Lautstärke).

EventTarget SpeechSynthesisUtterance

Konstruktor

SpeechSynthesisUtterance()

Gibt eine neue SpeechSynthesisUtterance-Objektinstanz zurück.

Instanz-Eigenschaften

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.

Ereignisse

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.

Beispiele

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().

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

Spezifikationen

Specification
Web Speech API
# speechsynthesisutterance

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
SpeechSynthesisUtterance
SpeechSynthesisUtterance() constructor
boundary event
end event
error event
lang
mark event
pause event
pitch
rate
resume event
start event
text
voice
volume

Legend

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

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

Siehe auch