JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<audio id="player" src="music/black_sun_empire-bnegative-sour.mp3"></audio>
<div class="player_controls">♫
    <button class="play"></button>
    <button class="stop"></button>
    <span id="volume_amount"></span>
    <div id="volume"></div>
    <button class="volume_up" onclick="player.volume += 0.1;"></button>
    <button class="volume_down" onclick="player.volume -= 0.1;"></button>
</div>

JavaScript

$(document).ready(function(){
	var player = document.getElementById('player');

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

	$('.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 ) {
		player.volume = ui.value;
	} );
    
    /*
    $( "#volume" ).on( "slide", function( event, ui ) {
		player.volume = $(this).slider('value');
	} );
    
    */

	/*ID3.loadTags("music/black_sun_empire-bnegative-sour.mp3", function() {
	    var tags = ID3.getAllTags(filename);
	    alert(tags.artist + " - " + tags.title + ", " + tags.album);
	});
	*/

});