Как синхронизировать SpeechSynthesis и изменения цвета текста в веб-проекте ⇐ Html

[Anonymous]

Сейчас я работаю над веб-проектом, использующим SpeechSynthesis API для чтения абзацев текста на веб-странице. Я пытался синхронизировать произносимые слова с изменением цвета в тексте, но столкнулся с некоторыми проблемами.
Вот краткий обзор проблемы:

• У меня есть функция, которая считывает содержимое тегов на странице с помощью SpeechSynthesis API.
• Цель — синхронизировать произносимые слова с изменениями цвета в режиме реального времени.
• В частности, я бы хотел, чтобы каждое слово менялось на красный, пока оно произносится, и возвращалось к исходному цвету, когда слово будет завершено.
• каждая попытка приводила к тому, что весь абзац был красным.

Мой рабочий код без синхронизации приведен ниже.

Код: Выделить всё

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

// Iterate through each  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);
});
}

• Я пытался использовать событие onboundary для изменения цвета отдельных слов, но это не сработало должным образом.
• Я попробовал несколько подходов, включая использование таймеров и событий, но мне не удалось добиться желаемой синхронизации.
• Каждая попытка приводила к тому, что весь абзац становился красным.
• Цель состоит в том, чтобы каждое слово менялось на красный, пока оно произносится, и возвращается к исходному цвету после завершения слова.

Подробнее здесь: https://stackoverflow.com/questions/778 ... eb-project