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

153
index.html
View File

@ -1258,34 +1258,64 @@ function renderAlphabet() {
`).join('');
}
let currentAudio = null;
function speakLetter(idx) {
const letter = alphabetData[idx].letter;
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(letter);
utterance.lang = 'ar-SA';
utterance.rate = 0.5;
utterance.pitch = 1;
window.speechSynthesis.speak(utterance);
const name = alphabetData[idx].name;
playArabicAudio(letter, name);
}
function playArabicAudio(text, label) {
// Stop any currently playing audio
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() {
if (!('speechSynthesis' in window)) {
showToast('Ваш браузер не поддерживает аудио', 'error');
return;
}
window.speechSynthesis.cancel();
let index = 0;
function speakNext() {
function playNext() {
if (index < alphabetData.length) {
const utterance = new SpeechSynthesisUtterance(alphabetData[index].letter);
utterance.lang = 'ar-SA';
utterance.rate = 0.5;
utterance.pitch = 1;
const letter = alphabetData[index].letter;
const name = alphabetData[index].name;
// Highlight current letter
const cards = document.querySelectorAll('.letter-card');
@ -1295,13 +1325,28 @@ function playAllLetters() {
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++;
setTimeout(speakNext, 300);
setTimeout(playNext, 500);
};
window.speechSynthesis.speak(utterance);
showToast('Буква ' + alphabetData[index].name + ' (' + (index + 1) + '/28)', 'info');
audio.onerror = () => {
index++;
setTimeout(playNext, 500);
};
audio.play().catch(() => {
index++;
setTimeout(playNext, 500);
});
} else {
showToast('Все буквы прослушаны!', 'success');
const cards = document.querySelectorAll('.letter-card');
@ -1309,7 +1354,7 @@ function playAllLetters() {
}
}
speakNext();
playNext();
}
function learnLetter(idx) {
@ -1360,14 +1405,7 @@ function renderHarakaat() {
}
function speakHaraka(text, name) {
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('Произношение: ' + name, 'info');
playArabicAudio(text, name);
}
function learnHaraka(idx) {
@ -1456,12 +1494,7 @@ function toggleFav(arabic) {
}
function speak(text) {
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ar-SA';
utterance.rate = 0.7;
speechSynthesis.speak(utterance);
}
playArabicAudio(text, '');
}
function selectQuizType(type) {
@ -1617,24 +1650,38 @@ function speakFullSurah(name) {
ikhlas: 'قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ. لَمْ يَلِدْ وَلَمْ يُولَدْ. وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ'
};
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const text = surahs[name];
const parts = text.split('. ');
let index = 0;
const text = surahs[name];
const parts = text.split('. ');
let index = 0;
function speakNext() {
if (index < parts.length) {
const utterance = new SpeechSynthesisUtterance(parts[index]);
utterance.lang = 'ar-SA';
utterance.rate = 0.6;
utterance.pitch = 0.9;
utterance.onend = () => { index++; speakNext(); };
window.speechSynthesis.speak(utterance);
}
function playNext() {
if (index < parts.length) {
const encoded = encodeURIComponent(parts[index]);
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++;
setTimeout(playNext, 400);
};
audio.onerror = () => {
index++;
setTimeout(playNext, 400);
};
audio.play().catch(() => {
index++;
setTimeout(playNext, 400);
});
} else {
showToast('Сура прослушана!', 'success');
}
speakNext();
}
playNext();
}
function markSurahPracticed(id) {