add listening options

src/pages/bn/[id].astro

@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,42 @@ const items  = data.data[idx];
       </section>
     </main>
 </LayoutBN>
+<script is:inline>
+  let isListening = false;
+  let speechSynthesisInstance = window.speechSynthesis;
+
+  function toggleSpeech() {
+    if (isListening) {
+      stopSpeech();
+    } else {
+      startSpeech();
+    }
+  }
+
+  function startSpeech() {
+    let message1 = document.getElementById('message1').innerText;
+    let message2 = document.getElementById('message2').innerText;
+    let allSpeechText = message1 + ' ' + message2;
+
+    let speechText = new SpeechSynthesisUtterance(allSpeechText);
+    speechText.lang = 'bn';  // Set language to Bengali
+
+    speechSynthesisInstance.speak(speechText);
+
+    document.getElementById('listenButton').innerText = 'Stop';
+    isListening = true;
+  }
+
+  function stopSpeech() {
+    speechSynthesisInstance.cancel();
+    document.getElementById('listenButton').innerText = 'Listen';
+    isListening = false;
+  }
+  // if(window.location.reload()){
+  //   isListening = false;
+  // }
+</script>
+
 <style>
   section > div > p > p {
     text-align: justify;