页面刷新后网页文本转语音（TTS）代码失效问题求助

问题根源 #

• 代码中引用的元素ID与实际HTML元素ID不匹配：代码里用speakBtn、cancelBtn、text，但按钮和文本的实际ID是数字串，导致事件绑定失败；页面刷新后DOM未加载完成就执行绑定代码，也会引发失效。
• speechSynthesis.getVoices()是异步加载接口，直接调用可能返回空数组，导致voices[1]取不到语音，造成功能时好时坏。
• 若错误将textToSpeech()调用放入window.onload中，会触发页面加载时自动朗读的问题。

修复后的代码 #

<script>
// 存储当前朗读实例，方便停止控制
let currentSpeech = null;

// 异步等待语音列表加载完成
function loadVoices() {
  return new Promise(resolve => {
    let voices = speechSynthesis.getVoices();
    if (voices.length > 0) {
      resolve(voices);
      return;
    }
    // 监听语音加载完成事件
    speechSynthesis.onvoiceschanged = () => {
      voices = speechSynthesis.getVoices();
      resolve(voices);
    };
  });
}

async function textToSpeech() {
  // 先终止之前的朗读
  window.speechSynthesis.cancel();
  
  const voices = await loadVoices();
  const speech = new SpeechSynthesisUtterance();
  // 匹配实际文本元素的ID
  const convert = document.getElementById("1112939208").innerHTML;
  
  speech.text = convert;
  speech.volume = 1; // 音量范围为0-1，超出会被浏览器自动修正
  speech.rate = 1;
  speech.pitch = 1;
  // 确保有可用语音再设置，避免报错
  if (voices.length > 1) {
    speech.voice = voices[1];
  } else if (voices.length > 0) {
    speech.voice = voices[0];
  }
  
  currentSpeech = speech;
  speechSynthesis.speak(speech);
}

function stop() {
  window.speechSynthesis.cancel();
  currentSpeech = null;
}

// 页面完全加载后再绑定事件
window.addEventListener('load', () => {
  // 匹配实际按钮的ID
  const speakBtn = document.getElementById("1200196725");
  const cancelBtn = document.getElementById("1731941681");
  
  speakBtn.addEventListener('click', textToSpeech);
  cancelBtn.addEventListener('click', stop);
});
</script>

<input type="button" id="1200196725" value="Speak" style="float: left; 
background-color:#00a2ab;
display:inline-block;
padding:0.3em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#FFFFFF;">
<input type="button" id="1731941681" value="Stop" style="float: left;background-color:#d4004b;
display:inline-block;
padding:0.3em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#FFFFFF;">
<p id="1112939208" style="display:none">
  my text here
</p>

关键修复点 #

• ID统一：确保代码中引用的元素ID与HTML实际ID完全匹配。
• 异步语音处理：用Promise等待语音列表加载完成，避免因语音未加载导致的功能失效。
• 事件绑定时机：在window.load事件中绑定按钮点击事件，确保DOM元素已完全渲染。
• 参数修正：将音量调整到0-1的合法范围，避免浏览器自动修正引发的异常。
• 朗读状态控制：存储当前朗读实例，保证停止功能的可靠性。

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