Chrome中Google语音SpeechSynthesisUtterance事件不触发及首次加载无语音问题

环境信息 #

• 设备：M1 MacBook Pro
• 系统版本：MacOS 15.1.1（24B91）
• Chrome版本：135.0.7049.42

问题描述 #

使用Speech Synthesis API时遇到以下异常：

• 使用Google提供的在线/异步语音（如Google US English）时，onstart、onend等事件完全不触发；切换到MacOS原生语音（如Samantha）时，所有事件均可正常触发。
• Chrome首次启动后，第一次调用speak()方法无音频输出，刷新页面或重试调用后恢复正常；间隔较长时间再次调用speak()，问题会复现，需再次刷新或重试。
• Google语音完成朗读后，speechSynthesis.speaking状态仍显示为true，无法启动新的语音合成任务。

测试Demo #

退出并重新打开Chrome即可复现问题，测试代码如下：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>SpeechSynthesis API Test</title>
      <style>
         body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
         }
         button {
            padding: 10px;
            margin: 10px 0;
         }
         select {
            padding: 5px;
            margin-bottom: 15px;
            width: 100%;
         }
         textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            margin-bottom: 15px;
         }
      </style>
   </head>
   <body>
      <h1>SpeechSynthesis API Test</h1>

      <div>
         <label for="text">Text to speak:</label>
         <textarea id="text">Hello! This is a test of the SpeechSynthesis API.</textarea>
      </div>

      <div>
         <label for="voice-select">Select Voice:</label>
         <select id="voice-select">
            <option value="">Loading voices...</option>
         </select>
      </div>

      <div>
         <button id="speak-btn">Speak</button>
         <button id="pause-btn">Pause</button>
         <button id="resume-btn">Resume</button>
         <button id="cancel-btn">Cancel</button>
      </div>

      <div id="status"></div>

      <script>
         // Check if browser supports speech synthesis
         if ("speechSynthesis" in window) {
            const synth = window.speechSynthesis;
            const textInput = document.getElementById("text");
            const voiceSelect = document.getElementById("voice-select");
            const speakBtn = document.getElementById("speak-btn");
            const pauseBtn = document.getElementById("pause-btn");
            const resumeBtn = document.getElementById("resume-btn");
            const cancelBtn = document.getElementById("cancel-btn");
            const statusEl = document.getElementById("status");

            let voices = [];

            // Function to populate voice dropdown
            function populateVoiceList() {
               voices = synth.getVoices();

               if (voices.length === 0) {
                  voiceSelect.innerHTML = '<option value="">No voices available</option>';
                  return;
               }

               voiceSelect.innerHTML = "";

               voices.forEach((voice, index) => {
                  const option = document.createElement("option");
                  option.value = index;
                  option.textContent = `${voice.name} (${voice.lang})`;
                  if (voice.default) {
                     option.selected = true;
                  }
                  voiceSelect.appendChild(option);
               });

               statusEl.textContent = `Loaded ${voices.length} voices.`;
            }

            // Initial population of voices
            populateVoiceList();

            // Chrome loads voices asynchronously
            if (synth.onvoiceschanged !== undefined) {
               synth.onvoiceschanged = populateVoiceList;
            }

            // Speak function
            function speak() {
               if (synth.speaking) {
                  statusEl.textContent = "Speech synthesis already in progress";
                  return;
               }

               const text = textInput.value;
               if (!text) {
                  statusEl.textContent = "Please enter text to speak";
                  return;
               }

               const utterance = new SpeechSynthesisUtterance(text);

               // Set selected voice if available
               if (voices.length > 0 && voiceSelect.value !== "") {
                  utterance.voice = voices[voiceSelect.value];
               }

               // Event handlers
               utterance.onstart = () => {
                  console.log("Speech started at:", new Date().toLocaleTimeString());
                  statusEl.textContent = "Speaking...";
               };

               utterance.onend = () => {
                  console.log("Speech ended at:", new Date().toLocaleTimeString());
                  statusEl.textContent = "Speech synthesis finished";
               };

               utterance.onerror = (event) => {
                  console.log(
                     "Speech error at:",
                     new Date().toLocaleTimeString(),
                     "Error:",
                     event.error
                  );
                  statusEl.textContent = "Error occurred: " + event.error;
               };

               synth.speak(utterance);
            }

            // Button event listeners
            speakBtn.addEventListener("click", speak);

            pauseBtn.addEventListener("click", () => {
               if (synth.speaking) {
                  synth.pause();
                  statusEl.textContent = "Speech synthesis paused";
               }
            });

            resumeBtn.addEventListener("click", () => {
               if (synth.paused) {
                  synth.resume();
                  statusEl.textContent = "Speech synthesis resumed";
               }
            });

            cancelBtn.addEventListener("click", () => {
               synth.cancel();
               statusEl.textContent = "Speech synthesis canceled";
            });
         } else {
            document.body.innerHTML =
               "<h1>Sorry, your browser does not support Speech Synthesis</h1>";
         }
      </script>
   </body>
</html>

后续测试更新 #

• 在另外两台不同架构的MacBook（Intel和ARM）上测试，均未出现上述问题。
• 重装Chrome后问题依然存在，计划尝试更新MacOS后再次测试并反馈结果。

内容的提问来源于stack exchange，提问作者dve.exe