Files
ko-grammar/docs/.vitepress/theme/components/AudioButton.vue
T

33 lines
643 B
Vue
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<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;
}>();
const audioEl = useTemplateRef("audio");
function playAudio() {
if (!audioEl.value) return;
document.querySelectorAll("audio").forEach((el) => {
el.pause();
});
stopTTS();
audioEl.value.src = props.src;
audioEl.value.currentTime = 0;
audioEl.value.play();
}
</script>
<style module></style>