javascript - SpeechSynthesisUtterance Chrome 问题

Question

我在使用 native SpeechSynthesisUtterance 时遇到问题(或错误)。我构建了一个基本函数“speak”，它将接受给定的字符串“text”并发音。

//Function for speaking text
function speak(text){
  if ('speechSynthesis' in window) {
    var sentence = new SpeechSynthesisUtterance();
    var voices = window.speechSynthesis.getVoices();
    for(var i = 0; i < voices.length; i++) {
          if(voices[i]['name'] == "Alex"){
            sentence.voice = voices[i];
          }
      }
    sentence.pitch = 0.5;
    sentence.rate = 1;
    sentence.text = text;
    window.speechSynthesis.speak(sentence);
  } else {
    console.log("Oops! Your browser does not support HTML SpeechSynthesis.")
  }
}

此功能在 Safari 中完美运行，选择语音“Alex”，然后用该语音发音给定的文本。另一方面，在 Chrome 中，我遇到了一个问题。由于某种原因，只有在 Chrome 中第二次调用该函数时才会选择“Alex”。第一次调用该功能时，会使用默认的女声朗读文本，但之后将声音设置为“Alex”，效果完美。我已将此错误限制为 Chrome 问题，但是，我仍然希望修复它。非常感谢任何帮助!

Answer 1

getVoices 是异步的(在规范勘误表中提到)，您需要听 voiceschanged event ，推理有点令人沮丧，但有道理，语音系统是延迟加载的，第一次调用 getVoices 会阻塞主线程，因此 android 上的第一次调用返回 0 结果，然后在以下情况下触发 onvoiceschanged声音变得可用。

// Chrome loads voices asynchronously.
window.speechSynthesis.onvoiceschanged = function(e) {
  loadVoices();
};

linked demo错误地设置了话语的 voice 属性。这不存在，相反，您需要更改 lang 和(可选)voiceURI 来更改默认使用的语音，如下所示和 new demo 中。 .

if (voiceSelect.value) {
  var selectedVoice = speechSynthesis.getVoices().filter(function(voice) { return voice.voiceURI == voiceSelect.value; })[0];

  msg.voiceURI = selectedVoice.voiceURI;
  msg.lang = selectedVoice.lang;

}