46 lines
951 B
Vue
46 lines
951 B
Vue
<template>
|
||
<span>
|
||
<span ref="main" :class="class" :lang="lang">
|
||
<slot />
|
||
</span>
|
||
<span>
|
||
<button type="button" @click="playAudio()">🗣️</button>
|
||
</span>
|
||
</span>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useTemplateRef } from "vue";
|
||
import { speak, getVoices } from "tauri-plugin-tts-api";
|
||
|
||
const { lang = "ko-KR" } = defineProps<{
|
||
class?: string;
|
||
lang?: string;
|
||
}>();
|
||
|
||
const mainEl = useTemplateRef("main");
|
||
|
||
async function playAudio() {
|
||
if (!mainEl.value) return;
|
||
|
||
const voices = await getVoices(lang);
|
||
if (!voices.length) return;
|
||
|
||
const v = voices[Math.floor(Math.random() * voices.length)];
|
||
console.log(JSON.stringify(v));
|
||
await speak({
|
||
text: mainEl.value.innerText
|
||
.replace(/[*]/gu, " ")
|
||
.replace(/[\p{Ps}\p{Pe}]/gu, ""),
|
||
language: null,
|
||
rate: null,
|
||
volume: null,
|
||
pitch: null,
|
||
queueMode: null,
|
||
voiceId: v.id,
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style module></style>
|