SpeechSynthesis

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 SpeechSynthesis Interface der Web Speech API ist das Steuerinterface für den Sprachdienst; es kann verwendet werden, um Informationen über die auf dem Gerät verfügbaren synthetisierten Stimmen abzurufen, die Sprachwiedergabe zu starten und zu pausieren sowie andere Befehle auszuführen.

EventTarget SpeechSynthesis

Instanzeigenschaften

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

SpeechSynthesis.paused Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn sich das SpeechSynthesis-Objekt in einem pausierten Zustand befindet.

SpeechSynthesis.pending Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn die Warteschlange der ausstehenden Äußerungen noch nicht gesprochene Äußerungen enthält.

SpeechSynthesis.speaking Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn eine Äußerung gerade ausgesprochen wird — selbst wenn SpeechSynthesis in einem pausierten Zustand ist.

Instanzmethoden

SpeechSynthesis erbt auch Methoden von seinem übergeordneten Interface, EventTarget.

SpeechSynthesis.cancel()

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

SpeechSynthesis.getVoices()

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

SpeechSynthesis.pause()

Versetzt das SpeechSynthesis-Objekt in einen pausierten Zustand.

SpeechSynthesis.resume()

Versetzt das SpeechSynthesis-Objekt in einen nicht-paussierten Zustand: Es wird fortgesetzt, wenn es bereits pausiert war.

SpeechSynthesis.speak()

Fügt eine utterance zur Äußerungswarteschlange hinzu; sie wird ausgesprochen, wenn alle vorher davor eingereihten Äußerungen gesprochen wurden.

Events

Hören Sie auf dieses Ereignis mit addEventListener() oder durch Zuweisen eines Ereignis-Listeners zur oneventname-Eigenschaft dieses Interfaces.

voiceschanged

Wird ausgelöst, wenn sich die Liste der SpeechSynthesisVoice-Objekte geändert hat, die von der SpeechSynthesis.getVoices()-Methode zurückgegeben würde. Ebenfalls verfügbar über die onvoiceschanged-Eigenschaft.

Beispiele

Zuerst ein Beispiel:

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

Schauen wir uns nun ein etwas umfassenderes Beispiel an. In unserem Sprachausgabe-Demo erhalten wir zunächst eine Referenz 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ü, damit der Benutzer auswählen kann, welche Stimme er möchte.

Innerhalb des inputForm.onsubmit-Handlers verhindern wir mit preventDefault(), dass das Formular abgeschickt wird, erstellen eine neue Instanz von SpeechSynthesisUtterance, die den Text aus dem Text-<input> enthält, setzen die Stimme der Äußerung auf die im <select> Element ausgewählte Stimme und beginnen mit der Wiedergabe der Äußerung über die SpeechSynthesis.speak()-Methode.

js
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 (let i = 0; i < voices.length; i++) {
    const option = document.createElement("option");
    option.textContent = `${voices[i].name} (${voices[i].lang})`;

    if (voices[i].default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voices[i].lang);
    option.setAttribute("data-name", voices[i].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 (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};

Spezifikationen

Specification
Web Speech API
# tts-section

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
SpeechSynthesis
cancel
getVoices
pause
paused
pending
resume
speak
speaking
voiceschanged event

Legend

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

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

Siehe auch