JSFiddle - React, Tailwind, and code Playground

HTML

<audio></audio>
<div class="playButton wrapa" data-audio="https://getradio.me/svoefm">
              <svg class="play" width="39" height="40" viewbox="5 8 50 56">
                <title>Play</title>
                <path class="custom-fill" d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" />
                <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z" />
                <path d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" />
              </svg>
              <svg class="pause hide" width="39" height="40" viewbox="0 -3.4 24 24">
                <title>Pause</title>
                <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63" />
                <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166...

CSS

.wrapa {
  position: relative;
  height: 50px;
  width: 606px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

 .wrapa.active {
  background: #ffffff;
}

.wrapa.active::before,
.wrapa.active::after {
  content: "";
  position: absolute;
  top: 0;
  width: 198px;
  height: 100%;
}

.wrapa.active::before {
  left: 0;
  background-color: #00ffff;
}

.wrapa.active::after {
  right: 0;
  background-color: #ff00ff;
}

.wrapa .play,
.wrapa .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  fill: #aa00ff;
}

.wrapa .custom-fill {
  fill: #000000;
}

.wrapa .pause {
  fill: #000000;
}

.wrapa .lines::before,
.wrapa .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapa .lines::after {
  left: 399px;
}

.hide {
  display: none;
}

JavaScript

(function iife() {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
   }

   function hide(el) {
      el.classList.add("hide");
   }

   function getButtonContainer(el) {
      while (el.classList.contains("playButton") === false) {
         el = el.parentNode;
      }
      return el;
   }

   function hideAllButtons(button) {
      const buttons = button.querySelectorAll(".play, .pause, .speaker");
      for (let i = 0; i < buttons.length; i++) {
         hide(buttons[i]);
      }
   }

   function getPlay(button) {
      return button.querySelector(".play");
   }

   function getPause(button) {
      return button.querySelector(".pause");
   }

   function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
   }

   function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
   }

   function pauseAllButtons() {
      let buttons = document.querySelectorAll(".playButton");
      for (let i = 0; i < buttons.length; i++) {
         if (isPlaying(buttons[i])) {
            showPlayButton(buttons[i]);
         }
      }
   }

   function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
      button.classList.add("active");
   }

   function getAudio() {
      return document.querySelector("audio");
   }

   function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
         player.setAttribute("src", src);
      }
      player.play();
   }

   function showButton(button, opts) {
      if (opts.playing) {
         showPlayButton(button);
      } else {
         showPauseButton(button);
      }
   }

   function pauseAudio(player) {
      player.pause();
   }

   function manageAudio(player, opts) {
      if (opts.playing) {
         pauseAudio(player);
  ...