quiz sentence hide details and stop audio before starting next

docs/.vitepress/theme/components/AudioButton.vue

@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import { useTemplateRef } from "vue";
+import { stop as stopTTS } from "tauri-plugin-tts-api";
 
 const props = defineProps<{
   src: string;
@@ -16,7 +17,14 @@ const audioEl = useTemplateRef("audio");
 
 function playAudio() {
   if (!audioEl.value) return;
+
+  document.querySelectorAll("audio").forEach((el) => {
+    el.pause();
+  });
+  stopTTS();
+
   audioEl.value.src = props.src;
+  audioEl.value.currentTime = 0;
   audioEl.value.play();
 }
 </script>

docs/.vitepress/theme/components/TTS.vue

@@ -30,6 +30,10 @@ async function playAudio() {
   const voices = await getVoices(lang);
   if (!voices.length) return;
 
+  document.querySelectorAll("audio").forEach((el) => {
+    el.pause();
+  });
+
   const v = voices[Math.floor(Math.random() * voices.length)];
   console.log(JSON.stringify(v));
   await speak({

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -25,7 +25,7 @@
         <span class="spoiler"> {{ v.en }} </span>
       </div>
 
-      <details v-if="example">
+      <details v-if="example" ref="sdetails">
         <summary>
           <span v-if="example.audio">
             {{ example.ko }}
@@ -69,6 +69,7 @@ const vList = ref<IVoc[]>([]);
 const vIndex = ref(0);
 const vSentAutoplayAudio = ref(true);
 
+const sentenceDetails = useTemplateRef("sdetails");
 const stts = useTemplateRef<InstanceType<typeof TTS>>("stts");
 
 const v = computed(() => vList.value[vIndex.value]);
@@ -99,6 +100,12 @@ vChosenCats.value = [...vCats.value];
 makeVList();
 
 function makeVList() {
+  nextTick(() => {
+    if (sentenceDetails.value) {
+      sentenceDetails.value.open = false;
+    }
+  });
+
   vList.value = Object.entries(vocabulary)
     .filter(([k]) => vChosenCats.value.includes(k))
     .flatMap(([, v]) => v);
@@ -113,6 +120,12 @@ function makeVList() {
 }
 
 function mark(isRight: boolean) {
+  nextTick(() => {
+    if (sentenceDetails.value) {
+      sentenceDetails.value.open = false;
+    }
+  });
+
   if (isRight) {
     vList.value = [...vList.value.filter((_, i) => i !== vIndex.value)];
     if (vList.value.length === 0) {