title: How to make circular play/pause audio player button?
body: <p>I have this HTML code:</p>
  
  <pre><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
  
  
  &lt;div class="container"&gt;
          &lt;span class="trigger-audio fa fa-play"&gt;
               &lt;audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor"
                  volume="1.0"&gt;
              &lt;/audio&gt;
          &lt;/span&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
           &lt;span class="trigger-audio fa fa-play"&gt;
              &lt;audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
                  volume="1.0"&gt;
                   &lt;/audio&gt;
              &lt;/span&gt;
  </code></pre>
  
  <p>And this javascript:</p>
  
  <pre><code>const audioButtons = document.querySelectorAll('.trigger-audio')
  const buttonToStopAllAudios = document.querySelector('.fa-stop')
  
  const getAudioElementFromButton = buttonElement =&gt;
    buttonElement.querySelector('audio')
  
  const stopAudioFromButton = buttonElement =&gt; {
    // Pause the audio
    getAudioElementFromButton(buttonElement).pause()
  
    // Update element classes
    buttonElement.classList.add('fa-play')
    buttonElement.classList.remove('fa-pause')
  }
  
  const playAudioFromButton = buttonElement =&gt; {
    // Pause the audio
    getAudioElementFromButton(buttonElement).play()
  
    // Update element classes
    buttonElement.classList.remove('fa-play')
    buttonElement.classList.add('fa-pause')
  }
  
  audioButtons.forEach(audioButton =&gt; {
    audioButton.addEventListener('click', () =&gt; {
      // I get this first because I have to pause all the audios before doing anything, so I have to know it this audio was paused or not
      const audioElement = getAudioElementFromButton(audioButton)
      const audioIsPaused = audioElement.paused
  
      // Stop all audios before starting this one
      audioButtons.forEach(stopAudioFromButton)
  
      audioIsPaused
        ? playAudioFromButton(audioButton) // Play if it's paused
        : stopAudioFromButton(audioButton) // Pause if it's playing
    })
  })
  
  buttonToStopAllAudios.addEventListener('click', () =&gt; {
    audioButtons.forEach(stopAudioFromButton)
  })
  </code></pre>
  
  <p>Upon running, it forms two play/pause audio players that are live streaming radio stations. Like <a href="https://jsfiddle.net/bhs6tysg/5/" rel="nofollow noreferrer">this</a>.</p>
  
  <p>How can I make these audio players look like <a href="https://i.stack.imgur.com/w2L0T.jpg" rel="nofollow noreferrer">this</a>?</p>
  
  <p>I'm not sure if the URL of <code>href</code> needs to be changed here. </p>