If I were to put 2 of these on a page, it would look like

JavaScript
1

I have others I need to do which I am stuck on.

As an example:

<style>
  .playButton1 {
    width: 600px;
    height: 44px;
    cursor: pointer;
    border: 3px solid #0059dd;
    background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
  }
  
  .playButton1.playing {
    background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
  }
  
  .play,
  .pause {
    margin: 2px 284px;
  }

</style>



<div class="playButton1">

    <svg class="play" width="39" height="40" viewbox="5 8 50 56">
      <path 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" fill="#000000"></path>
      <path fill="#0059dd" 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>
      <path fill="#0059dd" 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"></path>

    </svg>

    <svg class="pause" style="display:none;" width="39" height="40" viewbox="0 -3.4 24 24">
      <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>
      <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 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
      <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
      <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
      <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
      <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
    </svg>
  </div>


<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>



<script>
  (function iife() {
    function playButtonClickHandler() {
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play").style.display = "none";
        document.querySelector(".playButton1 .pause").style.display = "inline-block";
        player.play();
      } else {
        button.classList.remove("playing");
        document.querySelector(".playButton1 .play").style.display = "inline-block";
        document.querySelector(".playButton1 .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>





<style>
  .playButton2 {
    width: 600px;
    height: 44px;
    cursor: pointer;
    border: 3px solid #0059dd;
    background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
  }
  
  .playButton2.playing {
    background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
  }
  
  .play,
  .pause {
    margin: 2px 284px;
  }

</style>


    




<div class="playButton2">

    <svg class="play" width="39" height="40" viewbox="5 8 50 56">
      <path 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" fill="#000000"></path>
      <path fill="#0059dd" 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>
      <path fill="#0059dd" 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"></path>

    </svg>

    <svg class="pause" style="display:none;" width="39" height="40" viewbox="0 -3.4 24 24">
      <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>
      <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 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
      <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
      <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
      <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
      <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
    </svg>
  </div>


<audio id="player2" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>



<script>
  (function iife() {
    function playButtonClickHandler() {
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton2 .play").style.display = "none";
        document.querySelector(".playButton2 .pause").style.display = "inline-block";
        player.play();
      } else {
        button.classList.remove("playing");
        document.querySelector(".playButton2 .play").style.display = "inline-block";
        document.querySelector(".playButton2 .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>
2

Done

<style>
  .playButton1 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color:black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
    margin-top: 8px;
  }
  
  .pause {
    display: none;
  }
  
  .playButton1.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
  }
  
  .playButton1.svoefm svg {
    fill: #aaff00;

  }
  
  .playButton1.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
  }
  
  .playButton1.soundpark svg {
    fill: #ffaa00;
  }
  
  .playButton1.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
  }
  
  .playButton1.cavoparadisoclub svg {
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton1 svoefm">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg" />

      </source>
    </audio>
  </div>
  <div class="playButton1 soundpark">

    <svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none" >
      <source src="http://getradio.me/spdeep" type="audio/mpeg" />

      </source>
    </audio>
  </div>
  <div class="playButton1 cavoparadisoclub">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;" />



      </source>
    </audio>




  </div>
</div>

<script>

(function iife() {
    "use strict";

    function getButton(el) {
        while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
            el = el.parentNode;
        }
        return el;
    }

    function playButton1(event) {
        var button = getButton(event.target);
        var player = button.querySelector("audio");
        var play = button.querySelector(".play");
        var pause = button.querySelector(".pause");
        button.classList.add("clicked");
        player.volume = 1.0;

        if (player.paused) {
            play.style.display = "none";
            pause.style.display = "inline-block";
            player.play();
        } else {
            play.style.display = "inline-block";
            pause.style.display = "none";
            player.pause();
        }
    }


    var playButtons = document.querySelectorAll(".playButton1");
    playButtons.forEach(function addPlayButtonHandler(el) {
        el.addEventListener("click", playButton1);
    });
}());


</script>




<style>
  .playButton2 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color:black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
    margin-top: 8px;
  }
  
  .pause {
    display: none;
  }
  
  .playButton2.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
  }
  
  .playButton2.svoefm svg {
    fill: #aaff00;

  }
  
  .playButton2.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
  }
  
  .playButton2.soundpark svg {
    fill: #ffaa00;
  }
  
  .playButton2.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
  }
  
  .playButton2.cavoparadisoclub svg {
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton2 svoefm">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg" />

      </source>
    </audio>
  </div>
  <div class="playButton2 soundpark">

    <svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none" >
      <source src="http://getradio.me/spdeep" type="audio/mpeg" />

      </source>
    </audio>
  </div>
  <div class="playButton2 cavoparadisoclub">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;" />



      </source>
    </audio>




  </div>
</div>

<script>

(function iife() {
    "use strict";

    function getButton(el) {
        while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
            el = el.parentNode;
        }
        return el;
    }

    function playButton2(event) {
        var button = getButton(event.target);
        var player = button.querySelector("audio");
        var play = button.querySelector(".play");
        var pause = button.querySelector(".pause");
        button.classList.add("clicked");
        player.volume = 1.0;

        if (player.paused) {
            play.style.display = "none";
            pause.style.display = "inline-block";
            player.play();
        } else {
            play.style.display = "inline-block";
            pause.style.display = "none";
            player.pause();
        }
    }


    var playButtons = document.querySelectorAll(".playButton2");
    playButtons.forEach(function addPlayButtonHandler(el) {
        el.addEventListener("click", playButton2);
    });
}());


</script>
3

Wow, that’s a boat-load of duplication.

When you have several of them on the page, you had better not want to change anything about them, otherwise you will need to change every last one of them.

There are ways to remove that duplication.

4

Done:

 <style>
.playButton1 {
    margin-top: 8px;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-repeat: no-repeat;
box-sizing: border-box;
    border: 3px solid #0059dd;
}
.playButton1.triggered {
    border: 3px solid #e77d19;
     background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent  174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
    background-color: transparent;
    background-repeat: no-repeat;
}
.initial path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
}
.pause path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.play path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.hide {
    display: none;
}
  </style>



  <div class="playButton1">
  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause hide" style="margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
  
    <svg class="speaker hide" style="margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>
  
  </div>

  <audio class="player1 hide">
    <source type="audio/mpeg" src="http://hi5.1980s.fm/;"></source>
  </audio>

  <script>
var utils = (function () {
    "use strict";
    function show(el) {
        el.classList.remove("hide");
    }
    function hide(el) {
        el.classList.add("hide");
    }
    function hideAll(items) {
        items.forEach(function hideItem(item) {
            hide(item);
        });
    }

    return {
        show,
        hide,
        hideAll
    };
}());
var images = (function (utils) {
    "use strict";
    var icons = new Map();

    function getSVGIcons(button) {
        var buttonSVG = button.querySelectorAll("svg");
        Array.from(buttonSVG).forEach(function addIcon(svg) {
            var name = svg.getAttribute("class").split(" ")[0];
            icons.set(name, svg);
        });
        return icons;
    }
    function getSVGIcon(name) {
        return icons.get(name);
    }
    function showIcon(iconName) {
        utils.hideAll(icons);
        utils.show(getSVGIcon(iconName));
    }

    return {
        getSVGIcons,
        getSVGIcon,
        showIcon
    };
}(utils));
var togglePlayer = (function (images) {
    "use strict";
    var button;
    var player;

    function isPlaying() {
        return player.paused === false;
    }
    function toggle() {
        if (isPlaying()) {
            player.pause();
            images.showIcon("play");
        } else {
            player.play();
            images.showIcon("pause");
        }
    }
    function togglePlayingHandler() {
        button.classList.add("triggered");
        toggle();
    }
    function showPauseHandler() {
        if (isPlaying()) {
            images.showIcon("pause");
        }
    }
    function showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
    function init(playButton1, audioPlayer) {
        button = playButton1;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
        button.addEventListener("mouseover", showPauseHandler, false);
        button.addEventListener("mouseout", showSpeakerHandler, false);
    }
    return {
        init
    };
}(images));
var init = (function (togglePlayer) {
    "use strict";
    function iife() {
        var button = document.querySelector(".playButton1");
        var player = document.querySelector(".player1");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));

  </script>



 <style>
.playButton2 {
    margin-top: 8px;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-repeat: no-repeat;
box-sizing: border-box;
    border: 3px solid #0059dd;
}
.playButton2.triggered {
    border: 3px solid #e77d19;
     background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent  174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
    background-color: transparent;
    background-repeat: no-repeat;
}
.initial path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
}
.pause path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.play path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.hide {
    display: none;
}
  </style>



  <div class="playButton2">
  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause hide" style="margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
  
    <svg class="speaker hide" style="margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>
  
  </div>

  <audio class="player2 hide">
    <source type="audio/mpeg" src="http://hi5.1980s.fm/;"></source>
  </audio>

  <script>
var utils = (function () {
    "use strict";
    function show(el) {
        el.classList.remove("hide");
    }
    function hide(el) {
        el.classList.add("hide");
    }
    function hideAll(items) {
        items.forEach(function hideItem(item) {
            hide(item);
        });
    }

    return {
        show,
        hide,
        hideAll
    };
}());
var images = (function (utils) {
    "use strict";
    var icons = new Map();

    function getSVGIcons(button) {
        var buttonSVG = button.querySelectorAll("svg");
        Array.from(buttonSVG).forEach(function addIcon(svg) {
            var name = svg.getAttribute("class").split(" ")[0];
            icons.set(name, svg);
        });
        return icons;
    }
    function getSVGIcon(name) {
        return icons.get(name);
    }
    function showIcon(iconName) {
        utils.hideAll(icons);
        utils.show(getSVGIcon(iconName));
    }

    return {
        getSVGIcons,
        getSVGIcon,
        showIcon
    };
}(utils));
var togglePlayer = (function (images) {
    "use strict";
    var button;
    var player;

    function isPlaying() {
        return player.paused === false;
    }
    function toggle() {
        if (isPlaying()) {
            player.pause();
            images.showIcon("play");
        } else {
            player.play();
            images.showIcon("pause");
        }
    }
    function togglePlayingHandler() {
        button.classList.add("triggered");
        toggle();
    }
    function showPauseHandler() {
        if (isPlaying()) {
            images.showIcon("pause");
        }
    }
    function showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
    function init(playButton2, audioPlayer) {
        button = playButton2;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
        button.addEventListener("mouseover", showPauseHandler, false);
        button.addEventListener("mouseout", showSpeakerHandler, false);
    }
    return {
        init
    };
}(images));
var init = (function (togglePlayer) {
    "use strict";
    function iife() {
        var button = document.querySelector(".playButton2");
        var player = document.querySelector(".player2");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));

  </script>
5

Done…

<style>
  .playButton1 {
    position: relative;
    border: 3px solid #0059dd;
    width: 266px;
    height: 200px;
    cursor: pointer;
    margin-top: 8px;
    box-sizing: border-box;
  }
  
  .img1 {
    position: absolute;
    background: url(https://i.imgur.com/ZmbeHHW.png);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 12px 45px;
  }
  
  .img2 {
    position: absolute;
    background: url(https://i.imgur.com/4HJbzEq.png);
    width: 180px;
    height: 180px;
    margin: 7px 40px;
  }
  
  .grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    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);
  }
  
  .button div {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div class="playButton1">

  <div class="img1"></div>
  <div class="img2"></div>
  <div class="grad"></div>
 
  
  
  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player1" preload="none" >
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>


<script>
(function iife() {
    "use strict";

    function playButtonClickHandler() {
        var button = document.querySelector(".playButton1");
        var player = document.querySelector("#player1");
        player.volume = 1.0;
        if (player.paused) {
            button.querySelector(".play").style.display = "none";
            button.querySelector(".pause").style.display = "inline-block";
            player.play();
        } else {
            button.querySelector(".play").style.display = "inline-block";
            button.querySelector(".pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
}());

</script>



<style>
  .playButton2 {
    position: relative;
    border: 3px solid #0059dd;
    width: 266px;
    height: 200px;
    cursor: pointer;
    margin-top: 8px;
    box-sizing: border-box;
  }
  
  .img1 {
    position: absolute;
    background: url(https://i.imgur.com/ZmbeHHW.png);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 12px 45px;
  }
  
  .img2 {
    position: absolute;
    background: url(https://i.imgur.com/4HJbzEq.png);
    width: 180px;
    height: 180px;
    margin: 7px 40px;
  }
  
  .grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    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);
  }
  
  .button div {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div class="playButton2">

  <div class="img1"></div>
  <div class="img2"></div>
  <div class="grad"></div>
 
  
  
  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player2" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>


<script>
(function iife() {
    "use strict";

    function playButtonClickHandler() {
        var button = document.querySelector(".playButton2");
        var player = document.querySelector("#player2");
        player.volume = 1.0;
        if (player.paused) {
            button.querySelector(".play").style.display = "none";
            button.querySelector(".pause").style.display = "inline-block";
            player.play();
        } else {
            button.querySelector(".play").style.display = "inline-block";
            button.querySelector(".pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
}());

</script>
6

Done:

<style>
  .playButton1 {
    position: relative;
    width: 266px;
    height: 251px;
    cursor: pointer;
    border: 3px solid #0059dd;
box-sizing: border-box;
    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");
  }
  
  .initial line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .initial circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: #000000;
  }
  
  .button div {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 100px;
    left: 113px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div class="playButton1">

  <svg class="initial" 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="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player1" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>



<script>
(function iife() {
    "use strict";
    function playButtonClickHandler() {
        var button = document.querySelector(".playButton1");
        var player = document.querySelector("#player1");
        player.volume = 1.0;
        if (player.paused) {
            button.querySelector(".play").style.display = "none";
            button.querySelector(".pause").style.display = "inline-block";
            
            player.play();
        } else {
            button.querySelector(".play").style.display = "inline-block";
            button.querySelector(".pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
}());

</script>

<style>
  .playButton2 {
    position: relative;
    width: 266px;
    height: 251px;
    cursor: pointer;
    border: 3px solid #0059dd;
box-sizing: border-box;
    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");
  }
  
  .initial line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .initial circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: #000000;
  }
  
  .button div {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 100px;
    left: 113px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div class="playButton2">

  <svg class="initial" 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="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player2" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>



<script>
(function iife() {
    "use strict";
    function playButtonClickHandler() {
        var button = document.querySelector(".playButton2");
        var player = document.querySelector("#player2");
        player.volume = 1.0;
        if (player.paused) {
            button.querySelector(".play").style.display = "none";
            button.querySelector(".pause").style.display = "inline-block";
            
            player.play();
        } else {
            button.querySelector(".play").style.display = "inline-block";
            button.querySelector(".pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
}());

</script>
7

I thought I was going to run into issues doing this. Turns out I had none.

8

You’re breaking one of the fundamental rules. CSS at top, HTML in the middle, and Scripting at the end.
You’re also doing a lot of duplication there. Only one lot of CSS code is required, and only one lot of JavaScript code.

I’ll see if I can get to that before I head off tomorrow.

9

I’m only using one of each on the page. And so, each of them are different. I only duplicated those to see if I was able to.

10

What’s wrong with setting it up like this?
https://testpage34567.blogspot.com/

11

Internet explorer:

<style>
.playButton {
    margin-top: 8px;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-repeat: no-repeat;
box-sizing: border-box;
    border: 3px solid #0059dd;
}
.playButton.triggered {
    border: 3px solid #e77d19;
     background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent  174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
    background-color: transparent;
    background-repeat: no-repeat;
}
.initial path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
}
.pause3 path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.play path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.hide {
    display: none;
}
  </style>



  <div class="playButton">
  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause3 hide" style="margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
  
    <svg class="speaker hide" style="margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>
  
  </div>

  <audio class="player hide">
    <source type="audio/mpeg" src="http://hi5.1980s.fm/;"></source>
  </audio>

  <script>
var utils = (function () {
    "use strict";
    function show(el) {
        el.classList.remove("hide");
    }
    function hide(el) {
        el.classList.add("hide");
    }
    function hideAll(items) {
        items.forEach(function hideItem(item) {
            hide(item);
        });
    }

    return {
        show,
        hide,
        hideAll
    };
}());
var images = (function (utils) {
    "use strict";
    var icons = new Map();

    function getSVGIcons(button) {
        var buttonSVG = button.querySelectorAll("svg");
        Array.from(buttonSVG).forEach(function addIcon(svg) {
            var name = svg.getAttribute("class").split(" ")[0];
            icons.set(name, svg);
        });
        return icons;
    }
    function getSVGIcon(name) {
        return icons.get(name);
    }
    function showIcon(iconName) {
        utils.hideAll(icons);
        utils.show(getSVGIcon(iconName));
    }

    return {
        getSVGIcons,
        getSVGIcon,
        showIcon
    };
}(utils));
var togglePlayer = (function (images) {
    "use strict";
    var button;
    var player;

    function isPlaying() {
        return player.paused === false;
    }
    function toggle() {
        if (isPlaying()) {
            player.pause();
            images.showIcon("play");
        } else {
            player.play();
            images.showIcon("pause3");
        }
    }
    function togglePlayingHandler() {
        button.classList.add("triggered");
        toggle();
    }
    function showPauseHandler() {
        if (isPlaying()) {
            images.showIcon("pause3");
        }
    }
    function showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
    function init(playButton, audioPlayer) {
        button = playButton;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
        button.addEventListener("mouseover", showPauseHandler, false);
        button.addEventListener("mouseout", showSpeakerHandler, false);
    }
    return {
        init
    };
}(images));
var init = (function (togglePlayer) {
    "use strict";
    function iife() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector(".player");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));

  </script>
12

This code works on internet explorer:


<style>
  .playButton3 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: #000000;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
    margin-top:8px;
  }
  
  .playButton3.svoefm svg {
    fill: #aaff00;
  }
  
  .playButton3.soundpark svg {
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub svg {
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm" style="width: 83px; border-left: 3px solid #0059dd;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none" style="display:none;">
      <source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />

    </source></audio>
  </div>
  <div class="playButton3 soundpark" style="width: 88px; border-left: 3px solid #0059dd;border-right: 3px solid #0059dd;" onclick="playButton3(event)">

    <svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="display: none;margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none" style="display:none;">
      <source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />

    </source></audio>
  </div>
  <div class="playButton3 cavoparadisoclub" style="width: 83px;border-right: 3px solid #0059dd; " onclick="playButton3(event)">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none" style="display:none;">
      <source src='http://s5.onweb.gr:8488/;' />

    </source></audio>
  </div>
</div>
<script>
  function getButton(el) {
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
      el = el.parentNode;
    }
    return el;
  }

  function playButton3(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("clicked");
    player.volume = 1.0;

    if (player.paused) {
      play.style.display = "none";
      pause.style.display = "inline-block";
      player.play();
    } else {
      play.style.display = "inline-block";
      pause.style.display = "none";
      player.pause();
    }
  }

  function showPause(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      button.querySelector(".pause").style.display = "inline-block";
    }
  }

  function showSpeaker(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      button.querySelector(".pause").style.display = "none";
    }
  }

</script>

This code doesn’t work on internet explorer:

<style>
  .playButton2 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color:black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
   
  }
  
  .pause {
    display: none;
  }
  
  .playButton2.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
  }
  
  .playButton2.svoefm svg {
    fill: #aaff00;

  }
  
  .playButton2.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
  }
  
  .playButton2.soundpark svg {
    fill: #ffaa00;
  }
  
  .playButton2.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
  }
  
  .playButton2.cavoparadisoclub svg {
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton2 svoefm">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg" />

      </source>
    </audio>
  </div>
  <div class="playButton2 soundpark">

    <svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none" >
      <source src="http://getradio.me/spdeep" type="audio/mpeg" />

      </source>
    </audio>
  </div>
  <div class="playButton2 cavoparadisoclub">

    <svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;" />



      </source>
    </audio>




  </div>
</div>

<script>

(function iife() {
    "use strict";

    function getButton(el) {
        while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
            el = el.parentNode;
        }
        return el;
    }

    function playButton2(event) {
        var button = getButton(event.target);
        var player = button.querySelector("audio");
        var play = button.querySelector(".play");
        var pause = button.querySelector(".pause");
        button.classList.add("clicked");
        player.volume = 1.0;

        if (player.paused) {
            play.style.display = "none";
            pause.style.display = "inline-block";
            player.play();
        } else {
            play.style.display = "inline-block";
            pause.style.display = "none";
            player.pause();
        }
    }


    var playButtons = document.querySelectorAll(".playButton2");
    playButtons.forEach(function addPlayButtonHandler(el) {
        el.addEventListener("click", playButton2);
    });
}());


</script>

https://i.imgur.com/oYZRViP.png

13

This code works on internet explorer:


<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="" width="260" height="260" aria-hidden="true" alt="" />
</div>

<style>
    #playButton2 {
    margin-top: 8px;
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("");
background-repeat: no-repeat;;
    border: 3px solid #0059dd;
  }

</style>

<div id="playButton2" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
        player.volume=1.0; if (player.paused) {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient(to right, transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'\')';
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient(to right,transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'\')';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }" onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}" onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">

  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="speaker" style="display: none;margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="play" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>


</div>

<audio id="player2" preload="none" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

This code doesn’t work on internet explorer:


<style>
.playButton {
    margin-top: 8px;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-repeat: no-repeat;
box-sizing: border-box;
    border: 3px solid #0059dd;
}
.playButton.triggered {
    border: 3px solid #e77d19;
     background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent  174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
    background-color: transparent;
    background-repeat: no-repeat;
}
.initial path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
}
.pause3 path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.play path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.hide {
    display: none;
}
  </style>



  <div class="playButton">
  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause3 hide" style="margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
  
    <svg class="speaker hide" style="margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>
  
  </div>

  <audio class="player hide">
    <source type="audio/mpeg" src="http://hi5.1980s.fm/;"></source>
  </audio>

  <script>
var utils = (function () {
    "use strict";
    function show(el) {
        el.classList.remove("hide");
    }
    function hide(el) {
        el.classList.add("hide");
    }
    function hideAll(items) {
        items.forEach(function hideItem(item) {
            hide(item);
        });
    }

    return {
        show,
        hide,
        hideAll
    };
}());
var images = (function (utils) {
    "use strict";
    var icons = new Map();

    function getSVGIcons(button) {
        var buttonSVG = button.querySelectorAll("svg");
        Array.from(buttonSVG).forEach(function addIcon(svg) {
            var name = svg.getAttribute("class").split(" ")[0];
            icons.set(name, svg);
        });
        return icons;
    }
    function getSVGIcon(name) {
        return icons.get(name);
    }
    function showIcon(iconName) {
        utils.hideAll(icons);
        utils.show(getSVGIcon(iconName));
    }

    return {
        getSVGIcons,
        getSVGIcon,
        showIcon
    };
}(utils));
var togglePlayer = (function (images) {
    "use strict";
    var button;
    var player;

    function isPlaying() {
        return player.paused === false;
    }
    function toggle() {
        if (isPlaying()) {
            player.pause();
            images.showIcon("play");
        } else {
            player.play();
            images.showIcon("pause3");
        }
    }
    function togglePlayingHandler() {
        button.classList.add("triggered");
        toggle();
    }
    function showPauseHandler() {
        if (isPlaying()) {
            images.showIcon("pause3");
        }
    }
    function showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
    function init(playButton, audioPlayer) {
        button = playButton;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
        button.addEventListener("mouseover", showPauseHandler, false);
        button.addEventListener("mouseout", showSpeakerHandler, false);
    }
    return {
        init
    };
}(images));
var init = (function (togglePlayer) {
    "use strict";
    function iife() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector(".player");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));

  </script>
14

I wonder what the issue is in why others don’t work. And the ones that don’t work are the 2 Javascript ones we just did. But they are set up differently from the javascript codes below.

Only 2 don’t work on internet explorer.

Update:

Now I know why the other code doesn’t work on internet explorer. it doesn’t support for-reach

This code works on internet explorer:

Couldn’t this code be created in javascript using the method of the bellow javascript codes? I see they are similarly alike.

If this can be done, I would like to try it.


<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="" width="260" height="260" aria-hidden="true" alt="" />
</div>

<style>
    #playButton2 {
    margin-top: 8px;
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("");
background-repeat: no-repeat;;
    border: 3px solid #0059dd;
  }

</style>

<div id="playButton2" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
        player.volume=1.0; if (player.paused) {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient(to right, transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'\')';
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient(to right,transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'\')';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }" onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}" onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">

  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="speaker" style="display: none;margin:94px 100px;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="play" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>


</div>

<audio id="player2" preload="none" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

And these all work on internet explorer.

Works


<style>
  .playButton1 {
    width: 600px;
    height: 44px;
    cursor: pointer;
    border: 3px solid #0059dd;
    background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
  }
  
  .playButton1.playing {
    background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
  }
  
  .play1,
  .pause1 {
    margin: 2px 284px;
  }

</style>



<div class="playButton1">

    <svg class="play1" width="39" height="40" viewbox="5 8 50 56">
      <path 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" fill="#000000"></path>
      <path fill="#0059dd" 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>
      <path fill="#0059dd" 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"></path>

    </svg>

    <svg class="pause1" style="display:none;" width="39" height="40" viewbox="0 -3.4 24 24">
      <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>
      <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 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
      <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
      <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
      <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
      <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
    </svg>
  </div>


<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</source></audio>



<script>
  (function iife() {
    function playButtonClickHandler() {
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        button.classList.remove("playing");
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

Works:
https://jsfiddle.net/kfrazcer/1/

<style>
  .playButton5 {
    position: relative;
    border: 3px solid #0059dd;
    width: 266px;
    height: 200px;
    cursor: pointer;
    margin-top: 8px;
    box-sizing: border-box;
  }
  
  .img1 {
    position: absolute;
    background: url(https://i.imgur.com/ZmbeHHW.png);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 12px 45px;
  }
  
  .img2 {
    position: absolute;
    background: url(https://i.imgur.com/4HJbzEq.png);
    width: 180px;
    height: 180px;
    margin: 7px 40px;
  }
  
  .grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    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);
  }
  
  .button div {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div class="playButton5">

  <div class="img1"></div>
  <div class="img2"></div>
  <div class="grad"></div>
 
  
  
  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player5" preload="none" >
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>


<script>
(function iife() {
    "use strict";

    function playButtonClickHandler() {
        var button = document.querySelector(".playButton5");
        var player = document.querySelector("#player5");
        player.volume = 1.0;
        if (player.paused) {
            button.querySelector(".play").style.display = "none";
            button.querySelector(".pause").style.display = "inline-block";
            player.play();
        } else {
            button.querySelector(".play").style.display = "inline-block";
            button.querySelector(".pause").style.display = "none";
            player.pause();
        }
    }
    var playButton = document.querySelector(".playButton5");
    playButton.addEventListener("click", playButtonClickHandler);
}());

</script>

Works:
https://jsfiddle.net/kfrazcer/2/

<style>
  .playButton8 {
    position: relative;
    width: 266px;
    height: 251px;
    cursor: pointer;
    border: 3px solid #0059dd;
    box-sizing: border-box;
    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");
  }
  
  .initial line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .initial circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: #000000;
  }
  
  .button8 div {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 100px;
    left: 113px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div class="playButton8">

  <svg class="initial" 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="button8">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player8" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>



<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton8");
      var player = document.querySelector("#player8");
      player.volume = 1.0;
      if (player.paused) {
        button.querySelector(".play").style.display = "none";
        button.querySelector(".pause").style.display = "inline-block";

        player.play();
      } else {
        button.querySelector(".play").style.display = "inline-block";
        button.querySelector(".pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton8");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>
15

I read this on stack overflow:

Internet Explorer doesn’t support “for each” loops. You will need to change the code to use regular for loops:

16

Using forEach to add event handlers

Now, we can finish things off by using only one line inside of that forEach loop, to assign the playButton3 function as the event handler for all of the elements with a playButton3 class name.

function addEventHandler(el, eventType, handler) {
    el.addEventListener(eventType, handler);
}
var playButtons = document.querySelectorAll(".playButton3");
playButtons.forEach(function addPlayButtonHandler(el) {
    addEventListener(el, "click", playButton3);
});
17

Which version of IE are you using?

18

11, but I don’t really use it, it’s just on here.

19

Inspect element on there said this:

20

In that case, whatever you’re looking at on SO is out of date, as that caniuse page I linked to shows it’s had that capability from IE9 onwards.

Checked the linked page by expanding the ‘Array methods’ section on this.

http://kangax.github.io/compat-table/es5/