SpeechSynthesis API的getVoices方法返回空数组，无法设置语音怎么办？

语音合成API的语音列表是异步加载的。页面初始化阶段直接调用window.speechSynthesis.getVoices()时，浏览器还没完成系统语音数据的加载，所以返回空数组。而在开发者控制台执行代码时，页面已经加载完成，语音列表早已就绪，因此能正常获取到语音数组。

方法1：监听voiceschanged事件（官方推荐） #

当浏览器加载完语音列表后会触发voiceschanged事件，此时再获取语音并设置即可：

var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World!";

window.speechSynthesis.onvoiceschanged = function() {
  var voices = window.speechSynthesis.getVoices();
  // 确保目标索引存在再设置
  if (voices.length > 2) {
    msg.voice = voices[2];
    speechSynthesis.speak(msg);
  }
};

方法2：异步轮询（备选方案） #

如果voiceschanged事件触发不稳定，可以用轮询方式等待语音列表加载完成：

function initSpeech() {
  var voices = window.speechSynthesis.getVoices();
  if (voices.length > 0) {
    var msg = new SpeechSynthesisUtterance();
    msg.voice = voices[2];
    msg.text = "Hello World!";
    speechSynthesis.speak(msg);
  } else {
    setTimeout(initSpeech, 100); // 每100毫秒检查一次
  }
}

initSpeech();

优化建议：精准定位语音 #

依赖数组索引可能因环境变化失效，建议通过语音的name或lang属性精准匹配目标语音：

// 示例：找到"Microsoft Linda - English (Canada)"
var targetVoice = voices.find(voice => voice.name === "Microsoft Linda - English (Canada)");
if (targetVoice) {
  msg.voice = targetVoice;
}

内容的提问来源于stack exchange，提问作者Amolgorithm