У меня есть несколько длинных, хорошо написанных на арабском языке статей с диакритическими знаками.
У меня также есть аудиофайл, на котором женщина четко читает статью.
Я добавила аудио в статью, но мне нужно, когда я играю звук, чтобы выделить произносимый текст.
ПРИМЕЧАНИЕ: у меня нет проблем, если мне понадобится использовать роботизированный звук.
Я пытался использовать 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
