JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class='play playBtn' style="margin-left: 100px;">
			<i class="fa fa-play" aria-hidden="true"></i>	
</div>

<div>
  <audio id="player" type="audio/mpeg">
  
  </audio>
</div>

JavaScript

$(".playBtn").on('click', function(){
	var fa = $(this).find(".fa")
	if( $(fa).hasClass("fa-play")){
		$(fa).fadeOut(150, function(){
			$(this).removeClass("fa-play").addClass("fa-stop").fadeIn(150)
	
			document.getElementById("player").src = "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3"

			document.getElementById("player").load();
			document.getElementById("player").play();
     });
   }	
});