elya.k_2026/arabic-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed audio - using Google Translate TTS for Arabic pronunciation

Browse Source
This commit is contained in:
Dauren777 2026-06-19 06:59:39 +00:00
parent 7819a7f097
commit f1e4776b33
1 changed files with 101 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
index.html
View File

@ -1258,34 +1258,64 @@ function renderAlphabet() {
`).join(''); `).join('');
} }
let currentAudio = null;
function speakLetter(idx) { function speakLetter(idx) {
const letter = alphabetData[idx].letter; const letter = alphabetData[idx].letter;
if ('speechSynthesis' in window) { const name = alphabetData[idx].name;
window.speechSynthesis.cancel(); playArabicAudio(letter, name);
const utterance = new SpeechSynthesisUtterance(letter); }
utterance.lang = 'ar-SA';
utterance.rate = 0.5; function playArabicAudio(text, label) {
utterance.pitch = 1; // Stop any currently playing audio
window.speechSynthesis.speak(utterance); if (currentAudio) {
currentAudio.pause();
currentAudio = null;
} }
showToast('Произношение: ' + alphabetData[idx].name, 'info');
// Use Google Translate TTS (free, public API)
const encoded = encodeURIComponent(text);
const url = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=${encoded}&tl=ar`;
currentAudio = new Audio(url);
currentAudio.crossOrigin = 'anonymous';
currentAudio.onplay = () => {
showToast('🔊 ' + (label || text), 'info');
};
currentAudio.onerror = () => {
// Fallback to Web Speech API
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ar-SA';
utterance.rate = 0.5;
window.speechSynthesis.speak(utterance);
}
showToast('🔊 ' + (label || text), 'info');
};
currentAudio.play().catch(() => {
// Fallback to Web Speech API
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ar-SA';
utterance.rate = 0.5;
window.speechSynthesis.speak(utterance);
}
showToast('🔊 ' + (label || text), 'info');
});
} }
function playAllLetters() { function playAllLetters() {
if (!('speechSynthesis' in window)) {
showToast('Ваш браузер не поддерживает аудио', 'error');
return;
}
window.speechSynthesis.cancel();
let index = 0; let index = 0;
function speakNext() { function playNext() {
if (index < alphabetData.length) { if (index < alphabetData.length) {
const utterance = new SpeechSynthesisUtterance(alphabetData[index].letter); const letter = alphabetData[index].letter;
utterance.lang = 'ar-SA'; const name = alphabetData[index].name;
utterance.rate = 0.5;
utterance.pitch = 1;
// Highlight current letter // Highlight current letter
const cards = document.querySelectorAll('.letter-card'); const cards = document.querySelectorAll('.letter-card');
@ -1295,13 +1325,28 @@ function playAllLetters() {
cards[index].scrollIntoView({ behavior: 'smooth', block: 'center' }); cards[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
} }
utterance.onend = () => { showToast('Буква ' + name + ' (' + (index + 1) + '/28)', 'info');
const encoded = encodeURIComponent(letter);
const url = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=${encoded}&tl=ar`;
const audio = new Audio(url);
audio.crossOrigin = 'anonymous';
audio.onended = () => {
index++; index++;
setTimeout(speakNext, 300); setTimeout(playNext, 500);
}; };
window.speechSynthesis.speak(utterance); audio.onerror = () => {
showToast('Буква ' + alphabetData[index].name + ' (' + (index + 1) + '/28)', 'info'); index++;
setTimeout(playNext, 500);
};
audio.play().catch(() => {
index++;
setTimeout(playNext, 500);
});
} else { } else {
showToast('Все буквы прослушаны!', 'success'); showToast('Все буквы прослушаны!', 'success');
const cards = document.querySelectorAll('.letter-card'); const cards = document.querySelectorAll('.letter-card');
@ -1309,7 +1354,7 @@ function playAllLetters() {
} }
} }
speakNext(); playNext();
} }
function learnLetter(idx) { function learnLetter(idx) {
@ -1360,14 +1405,7 @@ function renderHarakaat() {
} }
function speakHaraka(text, name) { function speakHaraka(text, name) {
if ('speechSynthesis' in window) { playArabicAudio(text, name);
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ar-SA';
utterance.rate = 0.5;
window.speechSynthesis.speak(utterance);
}
showToast('Произношение: ' + name, 'info');
} }
function learnHaraka(idx) { function learnHaraka(idx) {
@ -1456,12 +1494,7 @@ function toggleFav(arabic) {
} }
function speak(text) { function speak(text) {
if ('speechSynthesis' in window) { playArabicAudio(text, '');
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ar-SA';
utterance.rate = 0.7;
speechSynthesis.speak(utterance);
}
} }
function selectQuizType(type) { function selectQuizType(type) {
@ -1617,24 +1650,38 @@ function speakFullSurah(name) {
ikhlas: 'قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ. لَمْ يَلِدْ وَلَمْ يُولَدْ. وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ' ikhlas: 'قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ. لَمْ يَلِدْ وَلَمْ يُولَدْ. وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ'
}; };
if ('speechSynthesis' in window) { const text = surahs[name];
window.speechSynthesis.cancel(); const parts = text.split('. ');
const text = surahs[name]; let index = 0;
const parts = text.split('. ');
let index = 0; function playNext() {
if (index < parts.length) {
function speakNext() { const encoded = encodeURIComponent(parts[index]);
if (index < parts.length) { const url = `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=${encoded}&tl=ar`;
const utterance = new SpeechSynthesisUtterance(parts[index]);
utterance.lang = 'ar-SA'; const audio = new Audio(url);
utterance.rate = 0.6; audio.crossOrigin = 'anonymous';
utterance.pitch = 0.9;
utterance.onend = () => { index++; speakNext(); }; audio.onended = () => {
window.speechSynthesis.speak(utterance); index++;
} setTimeout(playNext, 400);
};
audio.onerror = () => {
index++;
setTimeout(playNext, 400);
};
audio.play().catch(() => {
index++;
setTimeout(playNext, 400);
});
} else {
showToast('Сура прослушана!', 'success');
} }
speakNext();
} }
playNext();
} }
function markSurahPracticed(id) { function markSurahPracticed(id) {