lesson 7

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

@@ -0,0 +1,24 @@
+<template>
+  <span>
+    <button type="button" @click="playAudio()">▶️</button>
+    <audio ref="audio" style="display: none"></audio>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+const props = defineProps<{
+  src: string;
+}>();
+
+const audioEl = useTemplateRef("audio");
+
+function playAudio() {
+  if (!audioEl.value) return;
+  audioEl.value.src = props.src;
+  audioEl.value.play();
+}
+</script>
+
+<style module></style>

docs/.vitepress/theme/components/Details.vue

@@ -0,0 +1,20 @@
+<template>
+  <details>
+    <summary :class="$style.summary">{{ summary }}</summary>
+    <blockquote>
+      <slot />
+    </blockquote>
+  </details>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  summary?: string;
+}>();
+</script>
+
+<style module>
+.summary {
+  margin-top: -1em !important;
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <span>
+    <span ref="main">
+      <slot />
+    </span>
+    <span>
+      <button type="button" @click="playAudio()">▶️</button>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+const { lang = "ko" } = defineProps<{
+  lang?: string;
+}>();
+
+const mainEl = useTemplateRef("main");
+
+async function playAudio() {
+  if (!mainEl.value) return;
+  const voices = speechSynthesis
+    .getVoices()
+    .filter((v) => v.lang.split(/[-_]/)[0] === lang);
+  if (!voices.length) return;
+
+  const u = new SpeechSynthesisUtterance(mainEl.value.innerText);
+  u.voice = voices[Math.floor(Math.random() * voices.length)];
+  speechSynthesis.speak(u);
+}
+</script>
+
+<style module></style>