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: 400px;
    width: 400px;
}

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 analyser;
var xhr;

// Polyfil for animatiosn from 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

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() {
    analyser = context.createAnalyser();
    source.connect(analyser);
    analyser.connect(context.destination);

    source.noteOn(0);
    setTimeout(disconnect,...