Why Is The Voiceschanged Event Fired On Page Load?

In Chrome, the voiceschanged is firing on page load, so I don't need to call the function that has speechSynthesis.getVoices() initially in order for my empty array to be filled wi

Solution 1:

The event fires, because the list of voices changes when Chrome finishes making an API call to get the list of voices available only to Chrome users. Proof:

• If I load my Speech Synthesis API-based web app, with Internet connection, I have 21 available voices, a few months ago, I only remember 10 or 15 or so.
• If I do the same, without Internet connection, I only have two voices: Microsoft David Desktop and Microsoft Zira Desktop.

You probably notice that the two voices without Internet connection are rather boring and almost recognizable for being used in cheap audio production. But the Google Chrome ones are fluid and almost inflective. This event has to fire when the voices are loaded, of course. Take a quick glance at the W3C Errata in the Web Speech API Specification. Any time the voices are loaded, the voiceschanged event is fired....

voiceschanged: Fired when the contents of the SpeechSynthesisVoiceList, that the getVoices method will return, have changed. Examples include: server-side synthesis where the list is determined asynchronously, or when client-side voices are installed/uninstalled.

And, in fact, look at the last line of the MDN web docs you linked...

With Chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.

Speech Synthesis API-Based Source Code (from my open-source project PronounceThat)