JSFiddle - React, Tailwind, and code Playground

CSS

body{
 margin:0;padding:0;
}
canvas{
 background-color:#000;
 box-shadow:0 0 32px 0 rgba(0,0,0,0.9);
 border-radius:24px;
 overflow:hidden;
}

JavaScript

var ajaxB,AC,B,LC,op,x,y,ARRAY=[],START,W,H=128,C,CW=window.innerWidth,anim,context,source,SR,DIVIDER=512,half=CW/2|0,analyser,FF=1024;
var aMax=Math.max.apply.bind(Math.max,Math);
function error(a){
 console.log(a);
};
function end(e){
 source.removeEventListener('ended',end,false);
 webkitCancelAnimationFrame(anim);
 console.log('ended');
}
function animate(){
 var aa=new Uint8Array(analyser.frequencyBinCount),
     ya=new Uint8Array(analyser.frequencyBinCount),ba,ca,da;
 analyser.getByteTimeDomainData(ya);
 analyser.getByteFrequencyData(aa);
 ba=ca=aa.length;
 da=CW/ca;
    
 var pt=AC.currentTime-START;
 var S=SR*pt/DIVIDER|0;
 pt<B.duration?(anim=webkitRequestAnimationFrame(animate)):end();
    
 context.clearRect(0,0,CW,H);
 context.fillStyle='hsla(0,0%,0%,1)';
 context.fillRect(half-1,0,3,H);
 
 //context.fillStyle='hsla(200,100%,70%,0.7)';
 for(var a=-half;a<half;a++){
  //ctx.fillStyle='hsla('+(b/c*240)+','+(y[b]/255*100|0)+'%,50%,1)';
     
     var CU=((a+half)*(FF/2/CW))|0;bh=aa[CU]+1,DD=(H/256)/2;
  context.fillStyle='hsla('+((pt/B.duration*240)+180)+',100%,70%,0.9)';
  context.fillRect(a+half,H/2,1,ARRAY[a+S]||0);
  context.fillRect(a+half,H/2,1,-ARRAY[a+S]||0);
     
  context.fillStyle='hsla('+((a+half)/CW*240)+',100%,70%,0.9)';
  context.fillRect(a+half,H-(bh*DD),1,(bh*DD));
     
  context.fillStyle='hsla('+(pt/B.duration*240)+',100%,50%,0.9)';
  context.fillRect(a+half,ya[CU]*(DD*2),1,1);
     

 }
 context.fillStyle='hsla(60,100%,70%,1)';
 context.fillRect(0,H/2,pt/B.duration*CW,1);
    
 context.fillStyle='hsla(0,0%,100%,1)';
 context.fillRect(half,0,1,H);
};
function playSound(){
 source=AC.createBufferSource();
 //source.addEventListener('ended',end,false);
 source.buffer=B;

 analyser=AC.createAnalyser();
 analyser.smoothingTimeConstant=0.85;
 analyser.fftSize=FF;
 source.connect(analyser);   
 analyser.connect(AC.destination);
 //source.start(0);
 START=AC.currentTime;
 source.noteOn(0);
 console.log('offset: '+START);
...