Estoy intentando configurar un clic de botón básico en la API de composición de Vue 3 para activar un efecto de sonido. Actualmente, mi función de configuración incluye un efecto de sonido mp3 importado de la carpeta de activos, luego pasado a un método ref con un tipo HTMLAudioElement, luego asignado a una constante llamada "reproducir". Después de agregar la constante "reproducir" al retorno, luego agregué "reproducir" a un controlador de clic en el botón. No recibo errores en la consola, pero el botón aún no activa el efecto de sonido. ¿Cómo puedo configurar la función de configuración y el botón para activar el efecto de sonido? Aquí está mi código:
<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>Puede usar la API de Audio directamente desde javascript:
import trumpetSfx from '../assets/demo_src_assets_fanfare.mp3' ... setup() { const audio = new Audio(trumpetSfx); function play() { audio.play() } return { play } } ...const trumpetSfx = require("../assets/demo_src_assets_fanfare.mp3"); export default { setup() { const audio = new Audio(trumpetSfx); const handleClick = () => { audio.play() } return { audio, handleClick } } }