lesson 7

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>