JSFiddle - React, Tailwind, and code Playground

HTML

<audio></audio>

<div class="playButtonf" data-audio="http://hi5.1980s.fm/;">

  <svg width="260" height="245" viewbox="0 0 260 245">
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
    <circle cx="135" cy="122" r="24.5"></circle>
  </svg>


  <div class="buttonf" focusable="false">
    <div class="playf" alt="PLAY">
    </div>
    <div class="pausef hidef" alt="PAUSE">
    </div>
  </div>
</div>

CSS

.playButtonf {
  position: relative;
  width: 260px;
  height: 245px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/qaEvk4G.png");
}

line,
circle {
  stroke-width: 6;
  stroke: #89cff0;
  fill: #000000;
}

.buttonf div {
  position: absolute;
  top: 100px;
  left: 113px;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  border-radius: 50%;
  pointer-events: none;
}

.playf {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4=");
  background-position: 58% 50%;
}

.pausef {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+");
  background-position: 50%;
}

.hidef {
  display: none;
}

JavaScript

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hidea");
    el.classList.remove("hideb");
    el.classList.remove("hidec");
    el.classList.remove("hided");
    el.classList.remove("hidee");
    el.classList.remove("hidef");
  }

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

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

  function hideAllButtons(button) {
    button.querySelectorAll(".playa, .pausea, .initialb, .pauseb, .speakerb, .playb, .playc, .pausec, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");
  }

  function getPause(button) {
    return button.querySelector(".pausea, .pauseb, .pausec, .paused, .pausee, .pausef");
  }

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

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hidea") || play.classList.contains("hideb") || play.classList.contains("hidec") || play.classList.contains("hided") || play.classList.contains("hidee") || play.classList.contains("hidef");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    pauseAllButtons();
    hideAllButtons(button);
    show(pause);
  }

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

  function playAudio(player, button) {
    var src = button.getAttribute("data-audio");
    player.volume =...