JSFiddle - React, Tailwind, and code Playground

HTML

<div class='controlplay'></div>
<div class='controlpause'></div>

CSS

.controlplay {
	position:relative;
	left:5px;
	top:5px;
	height:30px;
	width:30px;
	background:url(http://thoughtrender.com/music2/images/audiocontrols/play.svg) center center no-repeat;
	background-size:contain;
	z-index:10;
}

.controlpause {
	position:relative;
	left:5px;
	top:5px;
	height:30px;
	width:30px;
	background:url(http://thoughtrender.com/music2/images/audiocontrols/pause.svg) center center no-repeat;
	background-size:contain;
	z-index:10;
}

JavaScript

controlplay = $('.controlplay');
controlpause= $('.controlpause').hide();
	controlplay.on('click', function(e) {
		
		//audioPlayer[0].play();
		//$(this).replaceWith('<div class=controlpause></div>');
        controlplay.hide();
        controlpause.show();
	})
	controlpause.on('click',function(e) {
		
		//audioPlayer[0].pause();
		//$(this).replaceWith("<div class='controlplay'></div>");
        controlpause.hide();
        controlplay.show();
		
	})