如何使用切换按钮了解音频是否在React js中结束

Question

我已经构建了一个切换按钮来打开和关闭音频，但我的问题是，如果你可以帮助我一些提示，当音频完成并使用react js构建时，我如何才能将切换按钮返回到关闭。

import { React, useState } from 'react';
import './playSong.css';
Import music from './THREE.mp3';

const PlaySong = () => {
const [activeSong, setActiveSong] = useState(false);
var [saveSong, setSaveSong] = useState({});

var drake = {
    value: 3,
    name: 'Energy',
    artist: 'Drake',
    audio: music, //
};

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

return (
    <div className="container">
        <div className="button r" id="button-4">    
            <input type="checkbox" className="checkbox" onChange={handlePlayPause} checked= 
            {activeSong} />
            <div className="knobs" />
            <div className="layer" />
        </div>
    </div>
   )
  }

 export default PlaySong

Answer 1

我使用了一个音频元素，并将其与我的切换按钮混合在一起&它起作用了。

import { React, useState } from 'react';
import './playSong.css';
import music from './THREE.mp3';

const PlaySong = () => {
const [activeSong, setActiveSong] = useState(false);
var [saveSong, setSaveSong] = useState({});

// var drake = {
//     value: 3,
//     name: 'Energy',
//     artist: 'Drake',
//     audio: music, //
// };

function handlePlayPause() {
    let states = !activeSong;
    setActiveSong(states);

    if (states) {
        var myAudio = document.getElementById("myAudio");  
        playSong(myAudio); // load song and play it
    }
    else {
        togglePause(saveSong); // pause song
    }

}

function playSong(myAudio) {
    if (myAudio) {
        myAudio.play();
        setSaveSong(myAudio);
        return myAudio;
    }
    // var Song = new Audio(drake.audio);
    // Song.play();
    // setSaveSong(Song);
    // return Song;
}

function togglePause(saveSong) {
    if (saveSong) {
        saveSong.pause();
        setSaveSong({});
    }
}

function handleEnded() {
    setActiveSong(false);
    setSaveSong({});
}

return (
    <div className="container">
        <div className="button r" id="button-4">    
            <input type="checkbox" className="checkbox" onChange= 
            {handlePlayPause} checked={activeSong} />
            <div className="knobs" />
            <div className="layer" />
        </div>
        <audio id="myAudio" onEnded={handleEnded}>
            <source src={music} type="audio/mpeg" />
            Your browser does not support the audio element.
        </audio>
    </div>
)
}

export default PlaySong

Answer 2

你有没有考虑过通过<audio>标签运行你所有的音频代码？

它有许多事件，您可以为其提供处理程序。

https://www.w3schools.com/tags/ref_av_dom.asp

具体地说，您可能需要查看ended或onended (可能是onEnded)事件。

https://www.w3schools.com/tags/av_event_ended.asp