Estoy construyendo mi sitio web y quiero un botón en la parte inferior de mi página, que reproducirá/pausará una canción usando useSound. Se reproduce cuando hago clic por primera vez, pero luego no puedo detener mi canción.
¿Alguien puede señalarme en la dirección correcta? Por favor vea mi código abajo.
import useSound from 'use-sound'; import galaxySfx from '../../public/sounds/galaxy.mp3'; import styles from "./sound.module.scss"; import Aos from "aos"; import "aos/dist/aos.css"; const PlayButton = ({}) => { const [play, { stop, isPlaying }] = useSound(galaxySfx); function playSong() { isPlaying === true; play(); } function stopSong() { isPlaying === false; stop(); } return ( <div className={styles.playButton}> <button data-aos="zoom-in" data-aos-offset="100" onClick={isPlaying ? stopSong() : playSong()} > 🎺 </button> </div> ); }; export default PlayButton;Después de leer la use-sound documentation , no vi ningún valor isPlaying del segundo valor devuelto que está desestructurando.
Por lo tanto, isPlaying no estará definido, pero puede realizar un seguimiento del estado de reproducción con un useState.
... import { useState } from "react"; const PlayButton = ({}) => { const [isPlaying, setIsPlaying] = useState(false); const [play, { stop }] = useSound(galaxySfx); function playSong() { setIsPlaying(true); play(); } function stopSong() { setIsPlaying(false); stop(); } El accesorio onClick espera que se llame a una función, por lo que no debe llamar a ninguna de las funciones que le pasa.
return ( <div className={styles.playButton}> <button data-aos="zoom-in" data-aos-offset="100" onClick={isPlaying ? stopSong : playSong} > 🎺 </button> </div> ); }Podría usar el mismo controlador para ambas operaciones. Verifique el estado de la variable isPlaying y actúe en consecuencia:
function togglePlay(){ if(isPlaying){ stop(); } else{ play(); } }Simplemente elimine el corchete, de esta manera las funciones no se ejecutarán a menos que haga clic en
onClick={isPlaying ? stop: play}