SpeechSynthesis

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

SpeechSynthesis.paused Nur lesbar

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

SpeechSynthesis.pending Nur lesbar

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

SpeechSynthesis.speaking Nur lesbar

Ein boolescher Wert, der true zurückgibt, wenn eine Äußerung derzeit gesprochen wird – auch wenn SpeechSynthesis in einem pausierten Zustand ist.

SpeechSynthesis erbt auch Methoden von seiner übergeordneten Schnittstelle, EventTarget.

SpeechSynthesis.cancel()

Entfernt alle Äußerungen aus der Äußerungs-Warteschlange.

SpeechSynthesis.getVoices()

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

SpeechSynthesis.pause()

Versetzt das SpeechSynthesis-Objekt in einen pausierten Zustand.

SpeechSynthesis.resume()

Versetzt das SpeechSynthesis-Objekt in einen nicht pausierten Zustand: setzt es fort, wenn es bereits pausiert war.

SpeechSynthesis.speak()

Fügt eine utterance zur Äußerungs-Warteschlange hinzu; diese wird gesprochen, nachdem alle zuvor eingeordneten Äußerungen gesprochen wurden.

Dieses Ereignis kann mit addEventListener() überwacht werden oder indem ein Ereignisüberwacher der oneventname-Eigenschaft dieser Schnittstelle zugewiesen wird.

voiceschanged

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

Zuerst ein einfaches Beispiel:

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

Nun betrachten wir ein umfangreicheres Beispiel. In unserem Speech synthesizer demo holen wir zunächst eine Referenz zum 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 damit ein Auswahlmenü, sodass der Benutzer wählen kann, welche Stimme er möchte.

Im inputForm.onsubmit-Handler verhindern wir das Absenden des Formulars mit preventDefault(), erstellen eine neue SpeechSynthesisUtterance Instanz, die den Text aus dem Text-<input> enthält, setzen die Stimme der Äußerung 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(".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();
};

• Web Speech API