SpeechSynthesisVoice

The SpeechSynthesisVoice interface of the Web Speech API represents a voice that the system supports. Every SpeechSynthesisVoice has its own relative speech service including information about language, name and URI.

Instance properties

{{domxref("SpeechSynthesisVoice.default")}} {{ReadOnlyInline}}
- : A boolean value indicating whether the voice is the default voice for the current app language (true), or not (false.)
{{domxref("SpeechSynthesisVoice.lang")}} {{ReadOnlyInline}}
- : Returns a {{glossary("BCP 47 language tag")}} indicating the language of the voice.
{{domxref("SpeechSynthesisVoice.localService")}} {{ReadOnlyInline}}
- : A boolean value indicating whether the voice is supplied by a local speech synthesizer service (true), or a remote speech synthesizer service (false.)
{{domxref("SpeechSynthesisVoice.name")}} {{ReadOnlyInline}}
- : Returns a human-readable name that represents the voice.
{{domxref("SpeechSynthesisVoice.voiceURI")}} {{ReadOnlyInline}}
- : Returns the type of URI and location of the speech synthesis service for this voice.

Examples

The following snippet is excerpted from our Speech synthesizer demo.

const synth = window.speechSynthesis;
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);

  utterThis.onpause = (event) => {
    const char = event.utterance.text.charAt(event.charIndex);
    console.log(
      `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
    );
  };

  inputTxt.blur();
};

Instance properties

Examples

Specifications

Browser compatibility

See also