CODEWITHSUNDEEP
javascriptgoogle-chromedomspeech
elphe
elphe

Reputation: 63

Why speechSynthesis.getVoices() in Google Chrome returns an empty list?

I want to access the list of voices that are part of the SpeechSynthesis API on desktop Chrome, Safari, and Firefox. If I open a new tab in each browser and, via the console, run:

speechSynthesis.getVoices()

...I expect an array containing 'SpeechSynthesisVoice' objects (i.e. the available voices) to be returned. Firefox and Safari behave as expected, but in Chrome the first call to getVoices() returns an empty array. I have to call the method again in order to receive the expected populated array.

Why does Chrome behave like this? Does it do some kind of lazy loading of certain web APIs? Please help me understand.

Upvotes: 6

Views: 3713

Answers (1)

Paul Rumkin
Paul Rumkin

Reputation: 6883

This happens because SpeechSynthesis API allows the usage of remote servers for speech synthesis and Chrome requests a list of voices from Google's servers. To fix this you need to wait when voices will be loaded and then request them again.

To do so you should to listen a voicechanged event, and then initialise your program's logic:

speechSynthesis.addEventListener("voiceschanged", () => {
  const voices = speechSynthesis.getVoices()
})

Upvotes: 9

Related Questions