files/en-us/web/api/speechsynthesis/voiceschanged_event/index.md
{{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.)
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("voiceschanged", (event) => { })
onvoiceschanged = (event) => { }
A generic {{DOMxRef("Event")}} with no added properties.
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}}
{{Compat}}