SpeechSynthesis

SpeechSynthesis erbt auch Eigenschaften von seinem Elterninterface 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 Äußerungswarteschlange noch nicht gesprochene Äußerungen enthält.

SpeechSynthesis.speaking Schreibgeschützt

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

SpeechSynthesis erbt auch Methoden von seinem Elterninterface EventTarget.

SpeechSynthesis.cancel()

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

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ßerungswarteschlange hinzu; sie wird gesprochen, wenn alle vorher in der Warteschlange befindlichen Äußerungen gesprochen wurden.

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

voiceschanged

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

Zuerst ein Beispiel:

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

Nun betrachten wir ein umfangreicheres Beispiel. In unserem Sprachsynthesizer-Demo holen wir uns zuerst eine Referenz zum SpeechSynthesis-Controller mit window.speechSynthesis. Nachdem wir einige notwendige Variablen definiert haben, rufen wir mit SpeechSynthesis.getVoices() eine Liste der verfügbaren Stimmen ab und füllen ein Auswahlmenü damit, sodass der Benutzer die gewünschte Stimme auswählen kann.

Im inputForm.onsubmit-Handler stoppen wir das Formular-Absenden mit preventDefault(), erstellen eine neue SpeechSynthesisUtterance-Instanz, die den Text aus dem <input> enthält, setzen die Stimme der Äußerung auf die im <select>-Element ausgewählte Stimme und starten die Ä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 (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.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 (const voice of voices) {
    if (voice.name === selectedOption) {
      utterThis.voice = voice;
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
};

• Web Speech API