JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
      //Create new function that will update the image source on click.
      function updateImage(el, soundfile) {
          //Determine if music is playing or paused then adjust image source accordingly.
          if(soundfile.mp3.paused) {
              el.src = "http://www.freeiconspng.com/uploads/pause-icon-18.png";
          } else {
              el.src = "https://static.wixstatic.com/media/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png/v1/crop/x_10,y_33,w_52,h_51/fill/w_52,h_51,al_c/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png";
          }
      };

      function playSound(el,soundfile) {
          if (el.mp3) {
              if(el.mp3.paused) el.mp3.play();
              else el.mp3.pause();
          } else {
              el.mp3 = new Audio(soundfile);
              el.mp3.play();
          }
          //Call new function made whenever the sound is toggled.
          updateImage(document.getElementById("Bottom-1"), el);
      };
    </script>
<body>
<span id="dummy" onclick="playSound(this, 'http://listen.shoutcast.com/newfm128mp3');">
  <img src="https://static.wixstatic.com/media/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png/v1/crop/x_10,y_33,w_52,h_51/fill/w_52,h_51,al_c/e2aefa_1969d5f605404431bb558b4ff9e60966~mv2.png" name="Bottom-1" width="50" height="45" border="0" id="Bottom-1"/>
</span>
</body>