36 lines
769 B
Vue
36 lines
769 B
Vue
<template>
|
||
<span>
|
||
<span ref="main" :class="class">
|
||
<slot />
|
||
</span>
|
||
<span>
|
||
<button type="button" @click="playAudio()">🎤︎︎</button>
|
||
</span>
|
||
</span>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useTemplateRef } from "vue";
|
||
|
||
const { lang = "ko" } = defineProps<{
|
||
class?: string;
|
||
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>
|