This is the shortcode for play song on toggle button and my problem is when I click the toggle button to pause the music did not paused
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 PlaySong
Finally, it's working and that is the code:
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({});
}
In your code, playMusic state is always false meaning that your else block in handlePlayMusic() method will never be reached. You need to call setPlayMusic to toggle the state after playing/pausing.
Also, you don't need two variables for one single state, so you don't need state variable.
Suggested code:
const [playing, setPlaying] = useState(false);
const handlePlayClick = () => {
setPlaying(prevPlaying => {
if (prevPlaying) {
song.pause();
} else {
song.play(); // might need to consider calling `resume`
}
return !prevPlaying;
});
};