SpeechSynthesis

Experimental

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Die SpeechSynthesis-Schnittstelle der Web Speech API ist die Controller-Schnittstelle für den Sprachdienst. Sie kann genutzt werden um Informationen über die Synthesestimmen, die auf dem Gerät verfügbar sind, zu erhalten. Außerdem um die Sprache zu starten, zu pausieren und andere Befehle auszuführen.

Eigenschaften

SpeechSynthesis erbt ebenfalls Eigenschaften seiner Elternschnittstelle, EventTarget.

SpeechSynthesis.paused (en-US) Schreibgeschützt
Ein Boolean (en-US) der true zurückgibt, wenn das SpeechSynthesis-Objekt sich im pausierten Zustand befindet.
SpeechSynthesis.pending (en-US) Schreibgeschützt
Ein Boolean (en-US) der true zurückgibt, wenn die Äußerungen-Warteschlange bisher ungesprochene Äußerungen enthält.
SpeechSynthesis.speaking (en-US) Schreibgeschützt
Ein Boolean (en-US) der true zurückgibt, wenn eine Äußerung aktuell gesprochen wird — auch wenn SpeechSynthesis sich aktuell im pausierten Zustand befindet.

Event-Handler

SpeechSynthesis.onvoiceschanged (en-US)
Wird ausgelöst, wenn sich die Liste von SpeechSynthesisVoice (en-US)-Objekten, die von der SpeechSynthesis.getVoices() (en-US)-Methode zurückgegeben würde, geändert hat.

Methoden

SpeechSynthesis erbt ebenfalls Methoden von seiner Elternschnittstelle, EventTarget.

SpeechSynthesis.cancel() (en-US)
Entfernt alle Äußerungen aus der Äußerungen-Warteschlange.
SpeechSynthesis.getVoices() (en-US)
Gibt eine Liste von SpeechSynthesisVoice (en-US)-Objecten zurück die alle verfügbaren Stimmen auf dem aktuellen Gerät repräsentiert.
SpeechSynthesis.pause() (en-US)
Versetzt das SpeechSynthesis-Objekt in den pausierten Zustand.
SpeechSynthesis.resume() (en-US)
Versetzt das SpeechSynthesis-Object in den nicht-pausierten Zustand: setzt es fort, wenn es bereits pausiert war.
SpeechSynthesis.speak() (en-US)
Fügt eine Äußerung (en-US) Äußerung zur Äußerungen-Warteschlange hinzu; sie wird gesprochen, wenn alle anderen davor eingereihten Äußerungen fertig gesprochen wurden.

Beispiele

In our basic Speech synthesiser demo, we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis. After defining some necessary variables, we retrieve a list of the voices available using SpeechSynthesis.getVoices() (en-US) and populate a select menu with them so the user can choose what voice they want.

Inside the inputForm.onsubmit handler, we stop the form submitting with preventDefault(),  create a new SpeechSynthesisUtterance (en-US) instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> (en-US) element, and start the utterance speaking via the SpeechSynthesis.speak() (en-US) method.

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');

var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');

var voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for(i = 0; i < voices.length ; i++) {
    var 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 = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(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

Spezifikation Status Kommentar
Web Speech API
Die Definition von 'SpeechSynthesis' in dieser Spezifikation.
Entwurf  

Browserkompatibilität

BCD tables only load in the browser

Siehe auch