Este es el código abreviado para reproducir la canción en el botón de alternar y mi problema es cuando hago clic en el botón de alternancia para pausar la música no se detuvo
import { React, useState } from 'react'; import './audio.css'; import music from './BLOOD.mp3'; const PlaySong = () => { var song = new Audio(music); const [playMusic, setPlayMusic] = useState(false); const handlePlayMusic = () => { let state = !playMusic; setPlayMusic(state); console.log(state); if(state === true){ song.play() } else { song.pause(); // the song did not stop when I call this method I don't know why } } return ( <div className="container"> <div className="button r" id="button-4"> <input type="checkbox" className="checkbox" onChange= {handlePlayMusic} /> <div className="knobs" /> <div className="layer" /> </div> </div> ) } export default PlaySongFinalmente, está funcionando y ese es el código:
const [activeSong, setActiveSong] = useState(false); var [saveSong, setSaveSong] = useState({}); var drake = { value: 3, name: 'Energy', artist: 'Drake', audio: music, // I get it from import music './song.mp3' }; function handlePlayPause() { let states = !activeSong; setActiveSong(states); if (states) { playSong(drake); // load song and play it } else { togglePause(saveSong); // pause song } } function playSong(drake) { var Song = new Audio(drake.audio); Song.play(); setSaveSong(Song); return Song; } function togglePause(saveSong) { saveSong.pause(); setSaveSong({}); }En su código, el estado de playMusic siempre es false , lo que significa que nunca se alcanzará su bloque else en el método handlePlayMusic() . Debe llamar a setPlayMusic para alternar el estado después de reproducir/pausar.
Además, no necesita dos variables para un solo estado, por lo que no necesita una variable de state .
Código sugerido:
const [playing, setPlaying] = useState(false); const handlePlayClick = () => { setPlaying(prevPlaying => { if (prevPlaying) { song.pause(); } else { song.play(); // might need to consider calling `resume` } return !prevPlaying; }); };