From f1e4776b332c0cdad75f2f477c678c4b42baf3fe Mon Sep 17 00:00:00 2001
From: Dauren777 <daurenmoldabaev99@mail.com>
Date: Fri, 19 Jun 2026 06:59:39 +0000
Subject: [PATCH] Fixed audio - using Google Translate TTS for Arabic
 pronunciation

---
 index.html | 155 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 101 insertions(+), 54 deletions(-)

diff --git a/index.html b/index.html
index 1cf4c41..3bd24e9 100644
--- a/index.html
+++ b/index.html
@@ -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;
-    
-    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);
-      }
+  const text = surahs[name];
+  const parts = text.split('. ');
+  let index = 0;
+  
+  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) {