80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<template>
|
||
<span>
|
||
<span ref="main" :class="class" :lang="lang">
|
||
<slot />
|
||
</span>
|
||
<audio style="display: none" ref="audio"></audio>
|
||
<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";
|
||
|
||
defineExpose({
|
||
playAudio,
|
||
});
|
||
|
||
const { lang = "ko-KR" } = defineProps<{
|
||
class?: string;
|
||
lang?: string;
|
||
}>();
|
||
|
||
const mainEl = useTemplateRef("main");
|
||
const audioEl = useTemplateRef("audio");
|
||
|
||
function getMainText() {
|
||
if (!mainEl.value) return "";
|
||
|
||
return mainEl.value.innerText
|
||
.replace(/[*]/gu, " ")
|
||
.replace(/[\p{Ps}\p{Pe}]/gu, "");
|
||
}
|
||
|
||
async function playAudio() {
|
||
if (!mainEl.value) return;
|
||
|
||
if (navigator.platform === "Win32" || !(await playAudioTTSPlugin())) {
|
||
if (!audioEl.value) return;
|
||
|
||
const url = new URL("http://localhost:5500/api/tts");
|
||
url.searchParams.set("voice", "glow-speak:ko_kss");
|
||
url.searchParams.set("text", getMainText());
|
||
|
||
audioEl.value.src = url.href;
|
||
audioEl.value.currentTime = 0;
|
||
audioEl.value.play();
|
||
}
|
||
}
|
||
|
||
async function playAudioTTSPlugin(): Promise<boolean> {
|
||
if (!mainEl.value) return false;
|
||
|
||
const voices = await getVoices(lang);
|
||
if (!voices.length) return false;
|
||
|
||
document.querySelectorAll("audio").forEach((el) => {
|
||
el.pause();
|
||
});
|
||
|
||
const v = voices[Math.floor(Math.random() * voices.length)];
|
||
console.log(JSON.stringify(v));
|
||
await speak({
|
||
text: getMainText(),
|
||
language: null,
|
||
rate: null,
|
||
volume: null,
|
||
pitch: null,
|
||
queueMode: null,
|
||
voiceId: v.id,
|
||
});
|
||
|
||
return true;
|
||
}
|
||
</script>
|
||
|
||
<style module></style>
|