JSFiddle - React, Tailwind, and code Playground

by Skaiman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="audio-play">
  <a id="play-pause-button" class="fa fa-play"></a>
</div>

CSS

.audio-play {
	display: block;
	position: relative;
	background: url(https://d.zaix.ru/9kmj.jpg);
	background-size: cover;
	width: 250px;
	height: 250px;
}

#play-pause-button{
  font-size: 50px;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%,-50%);
}

JavaScript

var audio = new Audio("https://d.zaix.ru/9km4.mp3");

$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#play-pause-button").removeClass('fa-pause');
     $("#play-pause-button").addClass('fa-play');
};