JSFiddle - React, Tailwind, and code Playground

by r3wt

HTML

<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<br/><br/><br/>
<div id="container">
    <audio class="audio-player" controls-preload="none">
        <source src="http://openex.info/cityofhoops/m/audio/COH Theme 2.mp3" type="audio/mpeg">
   </audio>

</div>

CSS

.audio-container{
	background:transparent;
	height: 40px;
	line-height: 35px;
	vertical-align: middle;
	margin: 2.5px;
	padding: 0px;
}
#player{
	float:right;
	width: 224px;
	height: 25px;    
	position: relative;
	margin: 0 auto;
	bottom: -12px;
	background: url('http://openex.info/cityofhoops/m/img/volume-background.png') no-repeat left top;
}
#volume {
	position: absolute;
	left: 26px;
	margin: 0 auto;
	height:15px;
	width: 166px;
	background: url('http://openex.info/cityofhoops/m/img/volume-empty.png') no-repeat center top;
}
#volume .ui-slider-range-min {
	height:15px;
	width: 166px;
	position: absolute;
	background: url('http://openex.info/cityofhoops/m/img/volume-full.png') no-repeat left top;
}
#volume .ui-slider-handle {
	width: 19px;
	height:19px;
	background: url('http://openex.info/cityofhoops/m/img/ball.png') no-repeat left top;
	position: absolute;
	margin-left: -8.5px;
	margin-top: -1.5px;
	cursor: pointer;
	outline: none;
}
.audio-player{
	display: none;
	visibility: hidden;
}
.play:hover,.pause:hover{
	opacity: .5;
	cursor:pointer;
}

JavaScript

var audio_show = '<div class="audio-container show-for-small-only">&nbsp;&nbsp;<img src="http://openex.info/cityofhoops/m/img/play.png" class="play"/>&nbsp;<img src="http://openex.info/cityofhoops/m/img/pause.png" class="pause"/>&nbsp;<div id="player"><div id="volume"></div></div>&nbsp;&nbsp;<small class="subheader">City of Hoops Theme</small>&nbsp;&nbsp;</div>';

$(function(){    
    $('#container').append(audio_show);
    //audio player
	var $audio = $(".audio-player");
	$.ajax({
		url: '/echo/json/',
		async: false,
		complete: function() {
			 $audio.trigger('load');
			$audio.prop('volume',.50);
		}
	});
	var $time = 0;
	var $time0 = 0;
	$audio.on('play',function(e){
		$time0 = setInterval(function(){
			console.log($audio.prop('currentTime'));
			$time = $audio.prop('currentTime');
		},1000);
	});
	$audio.on('pause',function(e){
		clearInterval($time0);
	});
	$audio.on('error', function(e) {
		switch (e.target.error.code) {
			case e.target.error.MEDIA_ERR_ABORTED:
				console.log('playback aborted.');
				$audio.trigger('load');
				$audio.prop('currentTime',$time);
				$audio.trigger('play');
			break;
			case e.target.error.MEDIA_ERR_NETWORK:
				console.log('A network error caused the audio download to fail.');
				$audio.trigger('load');
				$audio.prop('currentTime',$time);
				$audio.trigger('play');
			break;
			case e.target.error.MEDIA_ERR_DECODE:
				console.log('audio playback was aborted due to a corruption problem or because the video used features your browser did not support.');
			break;
			case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
				console.log('The video audio not be loaded, either because the server or network failed or because the format is not supported.');
			break;
			default:
				console.log('An unknown error occurred.');
			break;
		}
	}, true);
	$(document).on('click','.play',function(e){
		e.preventDefault();
		if($audio.prop('ended') ===...