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 repräsentiert eine Sprachanforderung. Sie 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
SpeechSynthesisUtterance-Objektinstanz zurück.
Instanz-Eigenschaften
SpeechSynthesisUtterance erbt auch Eigenschaften von seiner Elternschnittstelle, EventTarget.
SpeechSynthesisUtterance.lang-
Ruft die Sprache der Äußerung ab und setzt sie.
SpeechSynthesisUtterance.pitch-
Ruft die Tonhöhe ab und setzt sie, in der die Äußerung gesprochen wird.
SpeechSynthesisUtterance.rate-
Ruft die Geschwindigkeit ab und setzt sie, in der die Äußerung gesprochen wird.
SpeechSynthesisUtterance.text-
Ruft den Text ab und setzt ihn, der synthetisiert wird, wenn die Äußerung gesprochen wird.
SpeechSynthesisUtterance.voice-
Ruft die Stimme ab und setzt sie, die zum Sprechen der Äußerung verwendet wird.
SpeechSynthesisUtterance.volume-
Ruft die Lautstärke ab und setzt sie, in der die Äußerung gesprochen wird.
Ereignisse
Sie können auf diese Ereignisse mit addEventListener() hören oder einen Ereignis-Listener zu der oneventname-Eigenschaft dieser Schnittstelle zuweisen.
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 fertig gesprochen wurde. 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 während des Sprechens pausiert 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 Sprachsynthesizer-Demo holen wir zuerst eine Referenz zum SpeechSynthesis-Controller mit window.speechSynthesis. Nach der Definition einiger notwendiger Variablen rufen wir mit SpeechSynthesis.getVoices() eine Liste der verfügbaren Stimmen ab und füllen damit ein Auswahlmenü, damit der Nutzer wählen kann, welche Stimme er möchte.
Im inputForm.onsubmit-Handler verhindern wir das Absenden des Formulars mit preventDefault(), verwenden den constructor, um eine neue Äußerungsinstanz mit dem Text aus dem Text-<input> zu erstellen, setzen die Äußerungs-voice auf die im <select>-Element ausgewählte Stimme und starten das Sprechen der Äußerung über die SpeechSynthesis.speak()-Methode.
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 |