Javascript 如何在Web项目中同步语音合成和文本 colored颜色 更改

我目前正在做一个网络项目，使用SpeechSynthel API来阅读网页上的文本段落.我一直在努力使口语单词与文本中的 colored颜色 变化保持同步，但我面临着一些挑战.

以下是对这一问题的简要概述:

• I have a function that reads out the content of

  标签在页面上使用SpeechSynthesis API.

• 我们的目标是实时同步说出的单词和 colored颜色 变化.
• 具体地说，我希望每个单词在发音时都变为红色，并在单词完成时恢复为原始 colored颜色 .
• 每一次try 都导致整段文字变红.

我在没有同步的情况下工作的代码如下.

function speakAllParagraphs(page) {
  // Get all <p> elements within the current page
  var paragraphs = document
    .getElementById("page" + page)
    .getElementsByTagName("p");

  // Iterate through each <p> tag
  Array.from(paragraphs).forEach(function (paragraph, index) {
    // Speak the text of the paragraph
    var text = paragraph.innerText;

    // Create a new SpeechSynthesisUtterance
    var utterance = new SpeechSynthesisUtterance();
    utterance.text = text;

    // Find the voice by name
    const voices = speechSynthesis.getVoices();
    const targetVoice = voices.find(
      (voice) =>
        voice.name === "Microsoft Emily Online (Natural) - English (Ireland)"
    );

    if (targetVoice) {
      utterance.voice = targetVoice;
    } else {
      // Fallback: if the target voice is not available, use default voice
      utterance.voice = voices[0];
    }

    // Play the synthesized speech
    speechSynthesis.speak(utterance);
  });
}

• 我try 使用ONBERIAL事件来更改单个单词的 colored颜色 ，但它没有按预期工作.
• 我try 了几种方法，包括使用计时器和事件，但未能实现所需的同步.
• 每一次try 都导致整段文字变红.
• 我们的目标是让每个单词在说出时变成红色，并在单词完成时恢复到原始 colored颜色 .