JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropArea">
</div>
<canvas id="canvas">
    
</canvas>

CSS

#dropArea {
    height: 100px;
    width: 100px;
    background-color: blue;
}

#canvas {
    height: 300px;
    width: 200px;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
const CANVAS_HEIGHT = canvas.height;
const CANVAS_WIDTH = canvas.width;
const SPACER_WIDTH = 1;
const COL_WIDTH = 3;

var context = new (window.AudioContext || window.webkitAudioContext)();
var source;
var processor;
var analyser;
var xhr;

function initAudio(data) {
    source = context.createBufferSource();
    
    if(context.decodeAudioData) {
        context.decodeAudioData(data, function(buffer) {
            source.buffer = buffer;
            createAudio();
        }, function(e) {
            console.log(e);
        });
    } else {
        source.buffer = context.createBuffer(data, false /*mixToMono*/);
        createAudio();
       }
    
    
}

function createAudio() {
    processor = context.createJavaScriptNode(2048 /*bufferSize*/, 1 /*num inputs*/, 1 /*num outputs*/); 
    processor.onaudioprocess = processAudio;

    analyser = context.createAnalyser();
        
    source.connect(context.destination);
    source.connect(analyser);

    analyser.connect(processor);
    processor.connect(context.destination);

    source.noteOn(0);
    setTimeout(disconnect, source.buffer.duration * 1000 +1000);
}

function disconnect() {
    source.noteOff(0);
    source.disconnect(0);
    processor.disconnect(0);
    analyser.disconnect(0);
}

function processAudio(e) {
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    
    analyser.getByteFrequencyData(freqByteData);
    
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    
    var colors = [
        '#3369E8', // blue
        '#D53225', // red
        '#EEB211', // yellow
        '#009939' // green
      ];
    
    for (var i = 0; i < freqByteData.length; ++i) {
        
        var magnitude = freqByteData[i];
        var lingrad = ctx.createLinearGradient(0, CANVAS_HEIGHT, 0, CANVAS_HEIGHT - magnitude);
        
        lingrad.addColorStop(0, colors[i % colors.length]);
       ...