javascript - 如何在反应js中的切换按钮上停止歌曲

Question

这是在切换按钮上播放歌曲的简码，我的问题是当我单击切换按钮暂停时，音乐没有暂停

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

标签： javascriptreactjs

Answer 1

最后，它正在工作，这就是代码：

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({});
}