JSFiddle - React, Tailwind, and code Playground

HTML

<audio src="http://stream-dc1.radioparadise.com/ogg-192m"></audio>
<div id="soundMute"></div>

CSS

#soundMute {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(http://i.imgur.com/sDyhzo8.png);
}
#soundMute.muted {
  background-image: url(http://i.imgur.com/ZFs9DuC.png);
}

JavaScript

$(document).ready(function() {
  var track = document.querySelector('audio');
	track.volume = 0.3
  track.play()
});
$('#soundMute').on('click', function(){
  var track = document.querySelector('audio');
  if (track.paused) {
    track.play()
    $(this).removeClass('muted')
  } else {
    track.pause();
    $(this).addClass('muted')
  }
})