SpeechSynthesisVoice

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⁩.

TheSpeechSynthesisVoice interface of theWeb Speech API represents a voice that the system supports.EverySpeechSynthesisVoice has its own relative speech service including information about language, name and URI.

Instance properties

SpeechSynthesisVoice.defaultRead only: A boolean value indicating whether the voice is the default voice for the current app language (true), or not (false.)
SpeechSynthesisVoice.langRead only: Returns aBCP 47 language tag indicating the language of the voice.
SpeechSynthesisVoice.localServiceRead only: A boolean value indicating whether the voice is supplied by a local speech synthesizer service (true), or a remote speech synthesizer service (false.)
SpeechSynthesisVoice.nameRead only: Returns a human-readable name that represents the voice.
SpeechSynthesisVoice.voiceURIRead only: Returns the type of URI and location of the speech synthesis service for this voice.

Examples

The following snippet is excerpted from ourSpeech 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();};