JSFiddle - React, Tailwind, and code Playground

CSS

html,body{width:100%;height:100%;margin:0;padding:0;background-color:#000;}

JavaScript

(function(){
var canvas,audio,ajax,source,analyser,sound,animation,w,h,ctx,input;
function init(){
 var FF=2048;
 canvas=document.createElement('canvas');
 w=canvas.width=FF/2;
 h=canvas.height=512;
 ctx=canvas.getContext("2d");
 document.body.appendChild(canvas);
 audio=new webkitAudioContext();
 
 source=audio.createBufferSource();
 
 analyser=audio.createAnalyser();
 analyser.smoothingTimeConstant=0.85;
 analyser.fftSize=FF;
 
 source.connect(analyser);
 analyser.connect(audio.destination);

 input=document.createElement('input');
 input.type='file';
 input.addEventListener('change',readfile,false);
 document.body.appendChild(input);
 
 window.removeEventListener('load',init,false);
}
function progress(e){
 ctx.fillStyle='hsla('+(e.loaded/e.total*240)+',100%,50%,1)';
 ctx.fillRect(0,1,e.loaded/e.total*w,1);
}
function buffer(){
 audio.decodeAudioData(this.response,rdy,function(){console.log('Decoding Error')});
}
function rdy(a){
 source.buffer=a;
 source.noteOn(0);
 animation=webkitRequestAnimationFrame(animate);
}
function animate(){
 var a=new Uint8Array(analyser.frequencyBinCount),y=new Uint8Array(analyser.frequencyBinCount),b,c,d;
 analyser.getByteTimeDomainData(y);
 analyser.getByteFrequencyData(a);
 b=c=a.length;
 d=w/c;
 ctx.clearRect(0,0,w,h);
 while(b--){
  var bh=a[b]+1;
  ctx.fillStyle='hsla('+(b/c*240)+','+(y[b]/255*100|0)+'%,50%,1)';
  ctx.fillRect(1*b,h-bh,1,bh);
  ctx.fillRect(1*b,y[b],1,1);
 }
 animation=webkitRequestAnimationFrame(animate);
}
function readfile(e){
var a=new FileReader();
a.onload = function(e) {
 audio.decodeAudioData(a.result,rdy,function(){console.log('Decoding Error')});
}
a.readAsArrayBuffer(this.files[0]);
}
window.addEventListener('load',init,false);
})();