JavaScript Web Speech API语音合成utterance时常被截断问题求助

问题说明 #

我开发了一个小型TypeScript应用，使用JavaScript SpeechSynthesis实现语音功能，核心代码如下：

private speakWords(words: string) {
  const utter = new SpeechSynthesisUtterance();
  utter.lang = 'en-US';
  utter.text = words;

  window.speechSynthesis.speak(utter);
}

遇到的问题是：语音内容的开头部分（或单词）有时会被截断。比如在健身Web应用中反复点击“Triple Row”按钮时，有时能正常朗读，但有时会吞掉第一个单词的部分内容，甚至整个单词。尝试过取消之前的语音utterance、延迟100ms调用等方案，均无法解决。该问题在Windows 11电脑的Edge、Chrome和Firefox浏览器中稳定复现（概率约50%），但手机端运行正常。

可行解决思路 #

1. 等待语音合成引擎就绪后再执行朗读 #

SpeechSynthesis引擎可能未完全初始化就被调用，导致开头截断。通过监听voiceschanged事件确保引擎就绪，同时缓存指定语音避免切换问题：

private isSpeechEngineReady = false;

constructor() {
  // 监听语音引擎就绪事件
  window.speechSynthesis.onvoiceschanged = () => {
    this.isSpeechEngineReady = true;
  };
  // 主动触发语音列表获取，确保事件触发
  window.speechSynthesis.getVoices();
}

private async speakWords(words: string) {
  // 循环等待引擎就绪
  while (!this.isSpeechEngineReady) {
    await new Promise(resolve => setTimeout(resolve, 50));
  }

  const utter = new SpeechSynthesisUtterance();
  utter.lang = 'en-US';
  utter.text = words;
  // 指定具体美式英语语音，避免引擎自动切换
  const enUsVoice = window.speechSynthesis.getVoices().find(voice => voice.lang === 'en-US');
  if (enUsVoice) utter.voice = enUsVoice;

  window.speechSynthesis.speak(utter);
}

2. 彻底终止现有语音并添加极短延迟 #

取消所有未完成的语音后，给引擎极短的重置时间（比100ms更短的20ms可能更有效）：

private speakWords(words: string) {
  // 终止所有正在进行的语音任务
  window.speechSynthesis.cancel();
  
  // 20ms延迟让引擎完成状态重置
  setTimeout(() => {
    const utter = new SpeechSynthesisUtterance();
    utter.lang = 'en-US';
    utter.text = words;

    window.speechSynthesis.speak(utter);
  }, 20);
}

3. 在文本开头添加无声前缀 #

通过添加零宽空格（Unicode \u200B）给引擎足够的启动缓冲时间，避免开头内容被截断：

private speakWords(words: string) {
  const utter = new SpeechSynthesisUtterance();
  utter.lang = 'en-US';
  // 零宽空格作为无声前缀，不影响实际朗读内容
  utter.text = '\u200B' + words;

  window.speechSynthesis.speak(utter);
}

4. 监听语音启动事件，异常时重试 #

若引擎未正确触发朗读的onstart事件，自动重试一次：

private speakWords(words: string) {
  const utter = new SpeechSynthesisUtterance();
  utter.lang = 'en-US';
  utter.text = words;

  let hasStarted = false;
  
  utter.onstart = () => {
    hasStarted = true;
  };

  utter.onerror = () => {
    // 未启动则重试一次
    if (!hasStarted) {
      window.speechSynthesis.speak(utter);
    }
  };

  window.speechSynthesis.speak(utter);
}

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