SpeechSynthesis: voiceschanged event

{{APIRef("Web Speech API")}} 

The voiceschanged event of the Web Speech API is fired when the list of {{domxref("SpeechSynthesisVoice")}}  objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}}  method has changed (when the voiceschanged event fires.)

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

addEventListener("voiceschanged", (event) => { })

onvoiceschanged = (event) => { }

Event type

A generic {{DOMxRef("Event")}}  with no added properties.

Examples

This could be used to repopulate a list of voices that the user can choose between when the event fires. You can use the voiceschanged event in an addEventListener method:

const synth = window.speechSynthesis;

synth.addEventListener("voiceschanged", () => {
  const voices = synth.getVoices();
  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;
    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
});

Or use the onvoiceschanged event handler property:

const synth = window.speechSynthesis;
synth.onvoiceschanged = () => {
  const voices = synth.getVoices();
  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;
    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
};

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• Web Speech API