I'm having trouble setting up a basic button click feature in Vue 3 Composition API to play a sound effect. In my setup function, I have imported an mp3 sound effect from the assets folder and passed it into a ref method with an HTMLAudioElement type, which is then assigned to a constant named "play". I added "play" to the return statement and connected it to a click handler on the button. Despite no errors in the console, the sound effect isn't playing when the button is clicked. How can I adjust the setup function and button to successfully trigger the sound effect? Below is my current code:
<template>
<div div class="flex justify-center">
<button @click="play">Click</button>
</div>
</template>
<script>
import { ref } from 'vue'
import { trumpetSfx } from '../assets/demo_src_assets_fanfare.mp3'
export default {
name: 'Button',
components: {},
setup() {
const play = ref<HTMLAudioElement>(trumpetSfx);
return { play }
}
}
</script>