title: audio play/pause toggle not working in react
body: <pre><code>function MusicCard() {
  const [playing, setPlaying] = useState(false);
  
  const url = &quot;http://localhost:4000/musics/myMusic.mp3&quot;;
  const audio = new Audio(url);
  
  const play = () =&gt; {
      setPlaying(true);
      audio.play();
  };
  
  const pause = () =&gt; {
      setPlaying(false);
      audio.pause();
  };
  
  return (
      &lt;div className=&quot;music-card&quot;&gt;
          &lt;div className=&quot;music-card_image-con&quot;&gt;
              &lt;button style={{
                  backgroundImage: `url(${process.env.PUBLIC_URL}music-image.jpg)`
              }} onClick={playing ? pause : play}&gt;{ playing ? &lt;FaPause /&gt; : &lt;FaPlay /&gt; }&lt;/button&gt;
          &lt;/div&gt;
          &lt;div className=&quot;music-card_info-con&quot;&gt;
              &lt;div className=&quot;music-card_info-name&quot;&gt;
                  &lt;h3&gt;music name&lt;/h3&gt;
                  &lt;p&gt; - &lt;/p&gt;
                  &lt;p&gt;Singer&lt;/p&gt;
              &lt;/div&gt;
              &lt;div className=&quot;music-card_info-seekbar&quot;&gt;
                  &lt;input type=&quot;range&quot; style={{
                      width: &quot;100%&quot;
                  }} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;button className=&quot;music-card_actions-btn&quot;&gt;&lt;FaEllipsisV /&gt;&lt;/button&gt;
      &lt;/div&gt;
  
  );
  }
  </code></pre>
  <p>what is the problem with this toggle? when I press the play button it plays the music but when I pres it again it starts another session of the music like using another new Audio() method instead of pausing it!</p>
  <p><strong>Edit:</strong> the pause doesn't work and play starts new session of Audio every time starting to play</p>