Добавлена озвучка букв через Web Speech API

index.html

@@ -140,6 +140,78 @@ body {
   color: var(--gray-500);
 }
 
+.speak-btn {
+  background: var(--cyan);
+  color: var(--ink);
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  font-size: 18px;
+  cursor: pointer;
+  margin-top: 8px;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.speak-btn:hover {
+  background: #1be5ff;
+  transform: scale(1.1);
+}
+
+.speak-btn.speaking {
+  animation: pulse 0.6s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+}
+
+.speak-letter-btn {
+  background: var(--purple);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  font-size: 24px;
+  cursor: pointer;
+  margin-top: 15px;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.speak-letter-btn:hover {
+  background: #7B1FA2;
+  transform: scale(1.1);
+}
+
+.mirror-speak-btn {
+  background: var(--pink);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  font-size: 28px;
+  cursor: pointer;
+  margin: 15px 0;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mirror-speak-btn:hover {
+  background: #E91E63;
+  transform: scale(1.1);
+}
+
 /* Mirror Exercise */
 .mirror-container {
   display: flex;
@@ -484,7 +556,10 @@ body {
     </p>
     
     <div class="mirror-container">
-      <div class="mirror-letter" id="mirror-letter">Б</div>
+      <div style="text-align: center;">
+        <div class="mirror-letter" id="mirror-letter">Б</div>
+        <button class="mirror-speak-btn" onclick="speakMirrorLetter()">🔊</button>
+      </div>
       <div style="text-align: center;">
         <p style="font-size: 18px; margin-bottom: 20px;">Как должна выглядеть буква?</p>
         <button class="btn btn-primary" onclick="rotateLetter(-90)">← Влево</button>
@@ -509,6 +584,7 @@ body {
     
     <div class="sound-game">
       <div class="sound-letter-display" id="sound-letter">А</div>
+      <button class="speak-letter-btn" onclick="speakCurrentSoundLetter()">🔊</button>
       
       <div class="sound-options" id="sound-options">
         <!-- Sound options will be added here -->
@@ -636,6 +712,7 @@ function initLetters() {
     card.innerHTML = `
       <div class="letter">${item.letter}</div>
       <div class="sound">${item.sound}</div>
+      <button class="speak-btn" onclick="event.stopPropagation(); speakLetter('${item.letter}', this)">🔊</button>
     `;
     card.onclick = () => selectLetter(index, card);
     grid.appendChild(card);
@@ -875,6 +952,54 @@ function showFeedback(elementId, message, type) {
     feedback.style.display = 'none';
   }, 3000);
 }
+
+// Speech synthesis function
+function speakLetter(letter, button) {
+  // Check if speech synthesis is supported
+  if ('speechSynthesis' in window) {
+    // Cancel any ongoing speech
+    window.speechSynthesis.cancel();
+    
+    // Create a new speech utterance
+    const utterance = new SpeechSynthesisUtterance(letter);
+    
+    // Set language to Russian
+    utterance.lang = 'ru-RU';
+    
+    // Set rate and pitch for child-friendly speech
+    utterance.rate = 0.8;  // Slower speed
+    utterance.pitch = 1.2; // Higher pitch for children
+    
+    // Add visual feedback
+    if (button) {
+      button.classList.add('speaking');
+      utterance.onend = () => {
+        button.classList.remove('speaking');
+      };
+      utterance.onerror = () => {
+        button.classList.remove('speaking');
+      };
+    }
+    
+    // Speak the letter
+    window.speechSynthesis.speak(utterance);
+  } else {
+    // Fallback alert if speech synthesis is not supported
+    alert('Озвучка не поддерживается в этом браузере');
+  }
+}
+
+// Speak the current letter in sound game
+function speakCurrentSoundLetter() {
+  const letter = letters[currentSoundLetterIndex];
+  speakLetter(letter.letter, null);
+}
+
+// Speak the current mirror letter
+function speakMirrorLetter() {
+  const letter = mirrorLetters[currentMirrorIndex];
+  speakLetter(letter.letter, null);
+}
 </script>
 
 </body>