JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<div class='audiocontrols'>
            	<div class="audio_button" id='controlplay'></div>
                <div class="audio_button" id='controlpause'></div>
</div>

CSS

.audiocontrols {
	max-width:62%;
	height:40px;
	left:0;
	right:0;
	margin-left: auto;
    margin-right: auto;
	background:url(http://thoughtrender.com/music2/images/audiocontrols/ac_bg.svg) center center no-repeat;
	background-size:cover;
}
.audio_button {
	/*position:relative;*/
	display:block;
	
	height:30px;
	width:10%;
	background-image:url(http://thoughtrender.com/music2/images/audiocontrols/audio_icons.svg);
	background-repeat: no-repeat;
	background-size:auto 100%;
	float: left;
}

#controlplay {
	background-position: 5px 5px;
}

#controlpause {
	background-position: -35px 5px;
}

JavaScript

controlplay = $('#controlplay');
	controlpause= $('#controlpause').hide();
	controlplay.on('click', function(e) {
		
		//audioPlayer[0].play();
        controlplay.hide();
        controlpause.show();
	})
	controlpause.on('click',function(e) {
		
		//audioPlayer[0].pause();
        controlpause.hide();
        controlplay.show();
		
	})