39 lines
741 B
Vue
39 lines
741 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const containerRef = ref<HTMLDivElement>()
|
|
const fileInputRef = ref<HTMLInputElement>()
|
|
|
|
function handleFileUpload(e: Event) {
|
|
if (!e)
|
|
return
|
|
|
|
const file = fileInputRef.value?.files?.[0]
|
|
if (!file)
|
|
return
|
|
|
|
const audioElem = document.createElement('audio')
|
|
containerRef.value?.appendChild(audioElem)
|
|
|
|
audioElem.src = URL.createObjectURL(file)
|
|
audioElem.controls = true
|
|
audioElem.load()
|
|
audioElem.play()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ClientOnly>
|
|
<div>
|
|
<div ref="containerRef" />
|
|
<input
|
|
ref="fileInputRef"
|
|
type="file"
|
|
@change="handleFileUpload"
|
|
>
|
|
</div>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|