Hola, estoy tratando de reproducir un sonido mp3 diferente al pasar el mouse y luego detener el sonido cuando el mouse se va. Instalé la biblioteca use-sound pero no sé cómo usarla con más de un archivo de audio.
Si cambio el nombre de la función de reproducción a playAudio1, por ejemplo, puedo hacer que useSound reproduzca el archivo de audio correcto, pero no sé cómo detener el archivo de audio correcto. Estaba pensando si hay alguna manera de asignar la función "detener" en cada enlace a un nombre de variable diferente, para poder hacer referencia a ella a continuación en el evento onMouseLeave.
El siguiente código me da un error porque tengo dos funciones de "parada" idénticas.
import React, { useState} from "react"; import Audio1 from "../public/mp3/audio1.mp3"; import Audio2 from "../public/mp3/audio2.mp3"; import useSound from "use-sound"; function Home() { const [hoverAudio1, setHoverAudio1] = useState(false); const [hoverAudio2, setHoverAudio2] = useState(false); const [playAudio1, { stop }] = useSound(Audio1, { volume: 0.5, }); const [playAudio2, { stop }] = useSound(Audio2, { volume: 0.5, }); return ( <div onMouseEnter={() => { setHoverAudio1(true); playAudio1(); }} onMouseLeave={() => { setHoverAudio1(false); stop(); }} > </div> <div onMouseEnter={() => { setHoverAudio2(true); playAudio2(); }} onMouseLeave={() => { setHoverAudio2(false); stop(); }} > </div> )}En lugar de [playAudio1, {stop}] , debe usar [playAudio1, stopAudio1] para obtener los valores de retorno del gancho. Luego puede acceder a la función de parada con stopAudio1.stop() .
Puede cambiar el nombre de las claves desestructuradas:
const [playAudio1, { stop: stopAudio1 }] = useSound(Audio1, { volume: 0.5, }); const [playAudio2, { stop: stopAudio2 }] = useSound(Audio2, { volume: 0.5, }); return ( <div onMouseEnter={() => { setHoverAudio1(true); playAudio1(); }} onMouseLeave={() => { setHoverAudio1(false); stopAudio1(); }} ></div> <div onMouseEnter={() => { setHoverAudio2(true); playAudio2(); }} onMouseLeave={() => { setHoverAudio2(false); stopAudio2(); }} ></div> );