59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
||
<span>
|
||
<span ref="main"><slot /></span>
|
||
<button type="button" @click="playAudio()">▶️</button>
|
||
<audio ref="audio" style="display: none"></audio>
|
||
</span>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useTemplateRef } from "vue";
|
||
import { stop as stopTTS } from "tauri-plugin-tts-api";
|
||
|
||
const props = defineProps<{
|
||
src: string;
|
||
}>();
|
||
|
||
defineExpose({
|
||
playAudio,
|
||
});
|
||
|
||
const mainEl = useTemplateRef("main");
|
||
const audioEl = useTemplateRef("audio");
|
||
|
||
async function playAudio() {
|
||
if (!audioEl.value) return;
|
||
|
||
document.querySelectorAll("audio").forEach((el) => {
|
||
el.pause();
|
||
});
|
||
stopTTS();
|
||
|
||
const uploadURL = "https://www.howtostudykorean.com/wp-content/uploads";
|
||
let src = props.src;
|
||
if (src.startsWith(uploadURL)) {
|
||
src = src.replace(uploadURL, "/uploads");
|
||
if (mainEl.value) {
|
||
src += `?text=${encodeURIComponent(mainEl.value.innerText.trim())}`;
|
||
}
|
||
|
||
audioEl.value.onerror = () => {
|
||
if (!audioEl.value) return;
|
||
console.log(audioEl.value.error, src);
|
||
|
||
audioEl.value.src = props.src;
|
||
audioEl.value.currentTime = 0;
|
||
audioEl.value.play();
|
||
};
|
||
} else {
|
||
audioEl.value.onerror = null;
|
||
}
|
||
|
||
audioEl.value.src = src;
|
||
audioEl.value.currentTime = 0;
|
||
await audioEl.value.play();
|
||
}
|
||
</script>
|
||
|
||
<style module></style>
|