JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<audio id="player" src="http://dl.dropboxusercontent.com/u/10183003/LDVGM/Killer%20Instinct%20-%20Cinder%20Theme%20%28192kHz%29.mp3"></audio>
<div class="player_controls">♫
    <button class="play">Play/pause</button>
    <button class="stop">Stop</button>
    <span id="volume_amount"></span>
    <div id="volume"></div>
    <div id="song_info">
    	<div id="song_title"></div>
    	<div id="song_artist"></div>
    	<div id="song_duration"></div>
    </div>
</div>

SCSS

.player_controls {
	//position: fixed;
	padding: 5px;
	width: 300px;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 0 0 10px 0;
	color: white;
	font-size: 36px;
	button {
		width: 30px;
		height: 30px;
		border: 2px outset gray;
		border-radius: 16px;
		background-color: white;
		-webkit-transition: border .2s, box-shadow .2s;
		&:hover {border: 2px outset white;}
		&:active {
			border: 2px inset white;
			-webkit-transition: border 0s;
		}
	}
	.play {
		background: url('images/play.svg') no-repeat center center, white;
		background-size: $button_imgSize;
	}
	.pause {
		background: url('images/pause.svg') no-repeat center center, white;
		background-size: $button_imgSize;
		box-shadow: 0px 0px 2px 2px cyan;
	}
	.stop {
		background: url('images/stop.svg') no-repeat center center, white;
		background-size: $button_imgSize;
	}
	.volume_up {background: url('images/volume_up.svg') no-repeat center center, white;}
	.volume_down {background: url('images/volume_down.svg') no-repeat center center;}
	#volume{
		height: 15px;
		background: #333;
		.ui-slider-handle.ui-state-default.ui-corner-all{
			background: gray;
		}

		.ui-slider-range.ui-widget-header.ui-corner-all.ui-slider-range-min {
			background: white;
		}
	}
	#song_info{
		padding: 5px;
		
		#song_title, #song_artist{
			height: 15px;
			color: white;
			font-size: 12px;
		}
	}
}

JavaScript

var player = document.getElementById('player');

$('.play').click(function(){
    player.play();
    
    $(this).addClass('pause');
    $(this).removeClass('play');
});

$('.pause').click(function(){
    player.pause();
    
    $(this).addClass('play');
    $(this).removeClass('pause');
});

$('.stop').click(function(){
    player.pause();
    player.currentTime=0;
    
    $('.pause').addClass('play');
    $('.play').removeClass('pause');
});

$('#volume').slider({
    range: "min",
    min: 1,
    max: 100,
    value: 60
});

$( "#volume" ).on( "slide", function( event, ui ) {
    setVolume($(this).slider('value'));
} );

function setVolume(myVolume) {
    player.volume = myVolume /100;
}