vocab quiz convert ** to em

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

@@ -13,9 +13,13 @@ const props = defineProps<{
   src: string;
 }>();
 
+defineExpose({
+  playAudio,
+});
+
 const audioEl = useTemplateRef("audio");
 
-function playAudio() {
+async function playAudio() {
   if (!audioEl.value) return;
 
   document.querySelectorAll("audio").forEach((el) => {
@@ -25,7 +29,7 @@ function playAudio() {
 
   audioEl.value.src = props.src;
   audioEl.value.currentTime = 0;
-  audioEl.value.play();
+  await audioEl.value.play();
 }
 </script>
 

docs/.vitepress/theme/components/SentenceAudio.vue

@@ -0,0 +1,54 @@
+<template>
+  <component :is="lang !== 'ko' || v.audio ? 'span' : TTS" ref="stts">
+    <span
+      v-for="(seg, i) in v[lang].split('**')"
+      :key="i"
+      :class="i % 2 === 0 ? '' : spoiler ? 'spoiler' : $style.em"
+    >
+      {{ seg }}
+    </span>
+    <AudioButton v-if="lang === 'ko' && v.audio" :src="v.audio" ref="saud" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+import TTS from "./TTS.vue";
+import AudioButton from "./AudioButton.vue";
+
+export interface IVoc {
+  ko: string;
+  audio?: string;
+  en: string;
+  usages?: IVoc[];
+  notes?: string;
+  examples?: IVoc[];
+}
+
+defineProps<{
+  v: IVoc;
+  lang: "ko" | "en";
+  spoiler?: boolean;
+}>();
+
+defineExpose({
+  playAudio,
+});
+
+const stts = useTemplateRef<HTMLSpanElement | InstanceType<typeof TTS>>("stts");
+const saud = useTemplateRef<InstanceType<typeof AudioButton>>("saud");
+
+async function playAudio() {
+  if (saud.value) {
+    await saud.value.playAudio();
+  } else if (stts.value && "playAudio" in stts.value) {
+    await stts.value.playAudio();
+  }
+}
+</script>
+
+<style module>
+.em {
+  font-style: italic;
+}
+</style>

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

@@ -15,30 +15,22 @@
 
       <div>
         <span :class="isKoFirst ? '' : 'spoiler'">
-          <span v-if="v.audio">
-            {{ v.ko }}
-            <AudioButton :src="v.audio" />
-          </span>
-          <TTS v-else>
-            {{ v.ko }}
-          </TTS>
+          <SentenceAudio :v="v" lang="ko" />
         </span>
         <span>{{ " = " }}</span>
         <span :class="isKoFirst ? 'spoiler' : ''"> {{ v.en }} </span>
       </div>
 
       <details v-if="example" ref="sdetails">
-        <summary :class="isKoFirst ? '' : 'spoiler'">
-          <span v-if="example.audio">
-            {{ example.ko }}
-            <AudioButton :src="example.audio" />
-          </span>
-          <TTS v-else ref="stts">
-            {{ example.ko }}
-          </TTS>
+        <summary>
+          <SentenceAudio
+            :v="example"
+            lang="ko"
+            :spoiler="!isKoFirst"
+            ref="saud"
+          />
         </summary>
-        <span>{{ example.en }}</span>
-
+        <SentenceAudio :v="example" lang="en" />
         <blockquote
           v-if="v.notes"
           v-html="v.notes"
@@ -85,7 +77,7 @@
 <script setup lang="ts">
 import { useData } from "vitepress";
 import { computed, nextTick, ref, useTemplateRef, watch } from "vue";
-import TTS from "./TTS.vue";
+import SentenceAudio, { IVoc } from "./SentenceAudio.vue";
 
 const vCats = ref<string[]>([]);
 const vChosenCats = ref<string[]>([]);
@@ -96,7 +88,7 @@ const isSentAutoplayAudio = ref(true);
 const isKoFirst = ref(true);
 
 const sentenceDetails = useTemplateRef("sdetails");
-const stts = useTemplateRef<InstanceType<typeof TTS>>("stts");
+const saud = useTemplateRef<InstanceType<typeof SentenceAudio>>("saud");
 
 const v = computed(() => vList.value[vIndex.value]);
 const example = computed(() => {
@@ -107,15 +99,6 @@ const example = computed(() => {
 
 const MAX_VOC = 5;
 
-interface IVoc {
-  ko: string;
-  audio?: string;
-  en: string;
-  usages?: IVoc[];
-  notes?: string;
-  examples?: IVoc[];
-}
-
 const { frontmatter } = useData();
 const { vocabulary } = frontmatter.value as {
   vocabulary: Record<string, IVoc[]>;
@@ -156,11 +139,11 @@ function mark(isRight: boolean) {
     }
 
     if (isSentAutoplayAudio.value) {
-      if (stts.value) {
-        stts.value.playAudio();
-      } else if (example.value?.audio) {
-        new Audio(example.value.audio).play();
-      }
+      nextTick(() => {
+        if (saud.value) {
+          saud.value.playAudio();
+        }
+      });
     }
   });