Web Speech API之Speech Synthesis在Chrome和Firefox中存在延迟问题

在使用Web Speech API的SpeechSynthesis功能时，会遇到这样的问题：执行以下代码时，start事件的日志会在语音真正发出前1-4秒就触发，这个问题存在于Chrome和Firefox浏览器中，但macOS Safari运行正常。

示例代码：

const utterance = new SpeechSynthesisUtterance(text);
utterance.addEventListener('start', () => {
  console.log("Starting speak!");
});
window.speechSynthesis.speak(utterance);

问题原因 #

Chrome和Firefox的语音合成引擎在初始化、加载语音包阶段会产生延迟，但start事件的触发时机是引擎准备好处理语音实例（utterance）的时刻，而非实际音频输出到扬声器的时刻。Safari的引擎初始化逻辑更贴合实际播放流程，所以没有这个时间差。

解决方案 #

方案1：利用boundary事件实现精准触发

boundary事件会在语音播放到单词、句子等边界节点时触发，第一个boundary事件的触发时机几乎和实际语音输出同步，是替代start事件的可靠选择。同时提前确保语音资源加载完成，减少初始化延迟：

function speakWithAccurateStart(text) {
  // 等待语音列表加载完成，避免动态加载延迟
  let voices = window.speechSynthesis.getVoices();
  if (voices.length === 0) {
    window.speechSynthesis.onvoiceschanged = () => speakWithAccurateStart(text);
    return;
  }

  const utterance = new SpeechSynthesisUtterance(text);
  // 指定已加载的语音，避免临时加载
  utterance.voice = voices[0];

  let firstBoundaryTriggered = false;
  utterance.addEventListener('boundary', () => {
    if (!firstBoundaryTriggered) {
      console.log("Starting speak!");
      firstBoundaryTriggered = true;
    }
  });

  // 保留start事件作为降级方案
  utterance.addEventListener('start', () => {
    if (!firstBoundaryTriggered) {
      console.log("Starting speak (fallback)!");
    }
  });

  window.speechSynthesis.speak(utterance);
}

方案2：延迟触发（简易但不够精准）

如果对同步要求不高，可以在start事件触发后设置一个小延迟，延迟时间需根据设备和网络情况调整：

const utterance = new SpeechSynthesisUtterance(text);
utterance.addEventListener('start', () => {
  setTimeout(() => {
    console.log("Starting speak!");
  }, 600); // 可根据实际情况调整延迟时长
});
window.speechSynthesis.speak(utterance);

总结 #

优先选择方案1，利用boundary事件能更精准地捕捉实际语音开始的时刻，结合提前加载语音资源的操作，可最大程度消除事件触发与实际播放的时间差。

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