fix tts android

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

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <span ref="main" :class="class">
+    <span ref="main" :class="class" :lang="lang">
       <slot />
     </span>
     <span>
@@ -10,25 +10,37 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from "vue";
+import { ref, useTemplateRef } from "vue";
+import { speak, getVoices } from "tauri-plugin-tts-api";
 
 const { lang = "ko" } = defineProps<{
   class?: string;
   lang?: string;
 }>();
 
+const voiceIds = ref<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);
+  if (!voiceIds.value.length) {
+    voiceIds.value = (await getVoices(lang)).map((v) => v.id);
+    if (!voiceIds.value.length) return;
+  }
+
+  const voiceId =
+    voiceIds.value[Math.floor(Math.random() * voiceIds.value.length)];
+  await speak({
+    text: mainEl.value.innerText,
+    language: null,
+    rate: null,
+    volume: null,
+    pitch: null,
+    queueMode: null,
+    voiceId,
+  });
 }
 </script>