feat: add speech button

components/App.vue

@@ -8,6 +8,7 @@
       <a href="/?lang=nl" class="p-2">Dutch</a>
       <a href="/?lang=es" class="p-2">Spanish</a>
       <a href="/?lang=it" class="p-2">Italian</a>
+      <a href="/?lang=tr" class="p-2">Turkish</a>
     </nav>
     <div
       v-if="lang"
@@ -28,27 +29,35 @@
       </div>
     </div>
 
-    <div v-if="lang" class="text-center mt-4">
+    <div v-if="lang" class="pt-8 flex justify-center items-center gap-4">
       <button
-        class="bg-white border border-gray-400 shadow rounded-full w-10 h-10 p-2 mr-4"
+        class="bg-white shadow-lg rounded-full p-4 leading-4"
         @click="resetList()"
       >
         <span class="material-icons" :class="loading && 'animate-spin'">{{
           loading ? "refresh" : "shuffle"
         }}</span>
       </button>
       <button
-        class="bg-white border border-gray-400 shadow rounded-full w-10 h-10 p-2 mr-4"
+        class="bg-white shadow-lg rounded-full p-4 leading-4"
         @click="prevCard()"
       >
         <span class="material-icons">undo</span>
       </button>
       <button
-        class="bg-white border border-gray-400 shadow rounded-full w-10 h-10 p-2"
+        class="bg-white shadow-lg rounded-full p-4 leading-4"
         @click="nextCard()"
       >
         <span class="material-icons">redo</span>
       </button>
+
+      <button
+        class="bg-white shadow-lg rounded-full p-4 leading-4"
+        v-if="canSpeak"
+        @click="speak()"
+      >
+        <span class="material-icons">volume_mute</span>
+      </button>
     </div>
   </div>
 </template>
@@ -61,6 +70,7 @@ const card1 = ref<HTMLDivElement | null>(null);
 const card2 = ref<HTMLDivElement | null>(null);
 const pairs = ref<Pair[]>([]);
 const loading = ref(false);
+const canSpeak = ref(!!window.speechSynthesis);
 const lang = ref("");
 
 let flipped = false;
@@ -105,6 +115,10 @@ const resetList = async () => {
   await unflip();
 };
 
+const speak = async() {
+  speechSynthesis.speak(Object.assign(new SpeechSynthesisUtterance(flashcards.value[currentCard.value].front), { lang: lang.value }))
+}
+
 const nextCard = async () => {
   await unflip();
   setCurrentCard((unref(currentCard) + 1) % unref(flashcards).length);