integrated speech api

Author: chhaviS04

src/components/LetterAnimation.astro

@@ -134,8 +134,12 @@ const letterMap: LetterMap = {
     instructions: ["Draw a straight line up.", "Curve from top to middle.", "Draw a diagonal down."]
   },
   S: {
-    paths: [{ d: "M140,50 Q70,30 70,100 Q70,170 140,150", animationDelay: "0s" }],
-    instructions: ["Curve from top right to bottom left."]
+    paths: [
+      { d: "M140,50 C140,30 60,30 60,70", animationDelay: "0s" },
+      { d: "M60,70 C60,110 140,110 140,150", animationDelay: "1s" },
+      { d: "M140,150 C140,170 60,170 60,130", animationDelay: "2s" }
+    ],
+    instructions: ["Start at the top right, curve to the left.", "Curve to the right.", "Curve to the left to finish."]
   },
   T: {
     paths: [

src/pages/varnmala/speak.astro

@@ -40,14 +40,10 @@ import BackButton from "@/components/ui/backButton.astro";
         <label>Font Colour:</label>
         <input type="color" id="colorPicker" value="#000000" />
       </div>
-
-      <div class="control-group">
-        <button id="speakBtn" title="Speak Letter">Speak</button>
-      </div>
     </div>
     <Help
       title="English Playground"
-      description="Press any letter from the keyboard to display it. Use the controls to customize the background, font, and color. Click 'Speak' to hear the letter."
+      description="Press any letter from the keyboard to display it. Use the controls to customize the background, font, and color."
     />
   </Fragment>
   <BackButton />
@@ -66,7 +62,6 @@ import BackButton from "@/components/ui/backButton.astro";
   const fontSelector = document.getElementById("fontSelector") as HTMLSelectElement;
   const colorPicker = document.getElementById("colorPicker") as HTMLInputElement;
   const toggleBg = document.getElementById("toggleBg") as HTMLButtonElement;
-  const speakBtn = document.getElementById("speakBtn") as HTMLButtonElement;
 
   const synth = window.speechSynthesis;
   let lastKey: string | null = null; // Store the last key pressed
@@ -106,20 +101,14 @@ import BackButton from "@/components/ui/backButton.astro";
     setTimeout(() => {
       letterDiv.style.animation = "";
     }, 300);
+    speak(letter); // Speak the letter immediately after drawing
   }
 
   bgSelector?.addEventListener("change", updateBackground);
   fontSelector?.addEventListener("change", updateFont);
   colorPicker?.addEventListener("change", updateColor);
   toggleBg?.addEventListener("click", toggleBackground);
 
-  speakBtn?.addEventListener("click", () => {
-    const textToSpeak = letterDiv.textContent;
-    if (textToSpeak) {
-      speak(textToSpeak);
-    }
-  });
-
   document.addEventListener(
     "keydown",
     (e) => {