JSFiddle - React, Tailwind, and code Playground

by UnShame

HTML

<div id="display">
	<div id="fill"></div>
</div>
<div id="slider"></div>
<div id="hitmark"></div>
<input value="Click" type="button" id="button">

CSS

#display {
	height: 100px;
	width: 20px;
	margin-left: 105px;
	background-color: black;
	position: relative;
}

#fill {
	width:100%;
	margin-top:100%;
	background-color:blue;
	position: absolute;
	bottom: 0;
}

#slider {
	margin-top:10px;
	width: 200px;
	height:10px;
	margin-left:15px;
	background: linear-gradient(to right, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 40%,rgba(16,255,0,1) 45%,rgba(16,255,0,1) 55%,rgba(255,26,0,1) 60%,rgba(255,26,0,1) 60%,rgba(255,26,0,1) 100%);
}

#hitmark {
  width: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;  
  border-bottom: 15px solid black;
}

#button {
	margin-top: 10px;
	width: 200px;
	margin-left: 15px;
	height:30px;
	
}

JavaScript

let $mark = $('#hitmark'),
	$slider = $('#slider'),
	$display = $('#display'),
	$fill = $('#fill'),
	$button = $('#button'),
	audio = new Audio('https://raw.githubusercontent.com/unshame/files/master/pants.mp3'),
	curFill = 0;

function animateMark(forward){
	let duration = Math.round(Math.random()*500) + 1200;	
	$mark.animate({
		marginLeft: forward ? $slider.width() : 0
	},
	duration,
	'swing',
	() => animateMark(!forward));
}

function setVolume(v){
	$fill.css({
		height: v * $display.height()
	});
	curFill = v;
	audio.volume = v/2;
}

function clickAction(){
	let w = $('#slider').width(),
		start = w * 0.4,
		end = w * 0.6,
		position = parseInt($mark.css('margin-left')),
		isIn = position >= start && position <= end;
	if(isIn){
		setVolume(Math.max(curFill - 0.1, 0));
	}
	else{
		setVolume(1);
	}
}

animateMark(true);
setVolume(1);
$button.click(clickAction);
audio.play();
audio.loop = true;