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 class="audio_button" id='controlmute'></div>
</div>

CSS

.audiocontrols {
	position:relative;
	max-width:62%;
	height:30px;
	margin-top:5px;
	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:100% auto;
}

.audio_button {
	/*position:relative;*/
	position:absolute;
	display:block;
	
	height:30px;
	width:30px;
	background-image:url(http://thoughtrender.com/music2/images/audiocontrols/audio_icons.svg);
	background-repeat: no-repeat;
	background-size:470%;
	float: left;
}

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

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

#controlmute {
	right:10px;
	background-position: -60px 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();
		
	})