Как выделить произнесенное слово в Js? ⇐ Javascript

[Anonymous]

У меня есть несколько длинных, хорошо написанных на арабском языке статей с диакритическими знаками.
У меня также есть аудиофайл, на котором женщина четко читает статью.
Я добавила аудио в статью, но мне нужно, когда я играю звук, чтобы выделить произносимый текст.
ПРИМЕЧАНИЕ: у меня нет проблем, если мне понадобится использовать роботизированный звук.
Я пытался использовать API Web Speech, и это сработало, но когда я пытался использовать его на своем телефоне Android, в Chrome, но звук просто читал странные вещи, а иногда это не работало, потому что API не со всем совместим. Я хочу, чтобы он был совместим со всем. Я также пытался использовать библиотеку tts-react, но она не работала на мобильных устройствах.
Это код API веб-речи:






ResponsiveVoice with Highlighting

.highlight {
background-color: yellow;
font-weight: bold;
}
#text {
font-size: 1.2em;
line-height: 1.5;
}




موضوعات الكتاب:
أولا: مراجعة لما سبق في الكتاب الأول (التمهيدي) .
ثانيا الدروس:
1- الدرس الأول: ( هذا – هذه) : الإشارة لكلمات للتفريق بين : المذكر والمؤنث .
2- الدرس الثاني [هنا وهناك] : الإشارة لكلمات للتفريق بين القريب والبعيد.
3- الدرس الثالث [أين ؟] : تمييز الاتجاهات مع التقريب بالصور ( فوق – تحت – أمام – خلف – يمين – يسار – في – على... ) .
4- الدرس الرابع [الأوصاف]: ( كبير صغير – طويل قصير – قليل كثير – قريب بعيد – سريع بطيء – خفيف ثقيل – سمين نحيف ) .
5- الدرس الخامس [الألوان]: ( أحمر – أصفر – أخضر – أزرق ... ) .

Play


const btn = document.getElementById("play");

const highlight = (text, from, to) => {
let replacement = highlightBackground(text.slice(from, to));
return text.substring(0, from) + replacement + text.substring(to);
};

const highlightBackground = sample =>
`${sample}`;

btn && btn.addEventListener('click', () => {
const synth = window.speechSynthesis;
if (!synth) {
console.error('No TTS support.');
return;
}

const text = document.getElementById('text');
const originalText = text.innerText;

// Create a SpeechSynthesisUtterance with Arabic language
let utterance = new SpeechSynthesisUtterance(originalText);

// Set the language to Arabic
utterance.lang = 'ar';

// Optionally, choose an Arabic voice if available
const voices = synth.getVoices();
const arabicVoice = voices.find(voice => voice.lang.startsWith('ar')); // Find Arabic voice
if (arabicVoice) {
utterance.voice = arabicVoice;
}

utterance.addEventListener('boundary', event => {
const { charIndex, charLength } = event;
text.innerHTML = highlight(originalText, charIndex, charIndex + charLength);
});

// Set text direction to RTL for Arabic text
text.style.direction = 'rtl';

synth.speak(utterance);
});






Подробнее здесь: https://stackoverflow.com/questions/793 ... word-in-js