title: How to know if audio ended in React js with toggle button
body: <p>I have built a toggle button that turns on &amp; off the audio, but my problem is how can I return the toggle button to off when the audio has finished and it's building with react js if you can help me with some hints.</p>
  <pre><code>import { React, useState } from 'react';
  import './playSong.css';
  Import music from './THREE.mp3';
  
  const PlaySong = () =&gt; {
  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 (
      &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;button r&quot; id=&quot;button-4&quot;&gt;    
              &lt;input type=&quot;checkbox&quot; className=&quot;checkbox&quot; onChange={handlePlayPause} checked= 
              {activeSong} /&gt;
              &lt;div className=&quot;knobs&quot; /&gt;
              &lt;div className=&quot;layer&quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
     )
    }
  
   export default PlaySong
  </code></pre>