javascript - 如何将语音合成设置为特定语音而不与默认语音重叠

Question

我目前正在尝试在 speechSynthesis 中设置特定的语音，并且我做到了，但我现在面临的问题是，每当我触发语音时，在我的情况下，我使用一个按钮，第一个当我点击按钮时，它会触发我放在那里的 lang 的语音，即 en-GB，并且所选的语音只会在第二次点击之后生效。我只想使用 1 个语音，这是我从 getVoices 中选择的一个。您可以尝试下面的代码来了解我的意思，谢谢!

function speakTTS() {
  const voices = window.speechSynthesis.getVoices();
  const message = new SpeechSynthesisUtterance();
  message.text = "Please get me a bottle of water, thank you.";
  message.volume = 1; // Volume range = 0 - 1
  message.rate = 1.1; // Speed of the text read , default 1
  message.voice = voices[9]; // change voice
  message.lang = 'en-GB'; // Language, default 'en-US'
  window.speechSynthesis.speak(message);
  console.log(window.speechSynthesis.getVoices());
}

<button onClick=speakTTS()>Speak</button>

Answer 1

有一个我们可以使用的 onvoiceschanged 事件监听器。它会火 当声音完全加载时。

let voices

window.speechSynthesis.onvoiceschanged = function() {
  voices = window.speechSynthesis.getVoices();
};

function speakTTS() {
  const message = new SpeechSynthesisUtterance();
  message.text = "Please get me a bottle of water, thank you.";
  message.volume = 1; // Volume range = 0 - 1
  message.rate = 1.1; // Speed of the text read , default 1
  message.voice = voices[9]; // change voice
  message.lang = 'en-GB'; // Language, default 'en-US'
  window.speechSynthesis.speak(message);
  console.log(voices);
}

<button onClick=speakTTS()>Speak</button>

The onvoiceschanged property of the SpeechSynthesis interface represents an event handler that will run when the list of SpeechSynthesisVoice objects that would be returned by the SpeechSynthesis.getVoices() method has changed (when the voiceschanged event fires.)

UDN Web Docs: SpeechSynthesis.onvoiceschanged