48 lines
980 B
Vue
48 lines
980 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 { 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;
|
||
|
||
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>
|
||
|
||
<style module></style>
|