为什么 speechSynthesis.getVoices() in Google Chrome returns 是一个空列表？

Question

我想在桌面 Chrome、Safari 和 Firefox 上访问属于 SpeechSynthesis API 的语音列表。如果我在每个浏览器中打开一个新选项卡，并通过控制台运行:

speechSynthesis.getVoices()

...我希望返回一个包含 'SpeechSynthesisVoice' 个对象（即可用声音）的数组。 Firefox 和 Safari 的行为符合预期，但在 Chrome 中第一次调用 getVoices() returns 一个空数组。我必须再次调用该方法才能接收预期的填充数组。

为什么 Chrome 会这样？它是否对某些网站 API 进行某种延迟加载？请帮助我理解。

Answer 1

发生这种情况是因为 SpeechSynthesis API 允许使用远程服务器进行语音合成，并且 Chrome 从 Google 的服务器请求语音列表。要解决此问题，您需要等待语音加载完毕，然后再次请求它们。

为此你应该听 voicechanged event，然后初始化你的程序逻辑：

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

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