JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="music-files" multiple accept="audio/*"/>
<audio id="music" src=""></audio>
<br/><br/>
<div class="play" id="play" onclick = "play()">Play ></div>
<br/><br/>
<div class="stop" id="stop" onclick = "stop()">Stop |=| ></div>

JavaScript

window.onload = function(e) {		
	document.getElementById('music-files').addEventListener('change', selectMusic, false);
}

var musicFiles = [];
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audio;
var audioSrc;
var analyser;
var bufferLength;
var dataArray;

function selectMusic(e) {	
	musicFiles = e.target.files;	
}

function getFreq(){
	requestAnimationFrame(getFreq);
	analyser.getByteFrequencyData(dataArray);
	console.log(">>>>>>>>>>>>>>>");
	console.log(dataArray[240])
}

function play(){	
	var num = Math.floor(Math.random()*musicFiles.length);
	console.log("playing=" + num);
	var musicFile = URL.createObjectURL(musicFiles[num]); 
	$("#music").attr("src", musicFile);
	document.getElementById('music').play();
	
	audio = document.getElementById('music');
	audioSrc = audioCtx.createMediaElementSource(audio);	
	analyser = audioCtx.createAnalyser();
	audioSrc.connect(analyser);
	bufferLength = analyser.frequencyBinCount;
	dataArray = new Uint8Array(bufferLength);
	getFreq();
}

function stop(){
	document.getElementById('music').pause();
}