JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='vis' width='600' height='200'></canvas>
</br>
<button id='button'>Start</button>

CSS

canvas#vis {
    border: black 2px solid;
}

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context  = audioContext || new AudioContext();

var request = new XMLHttpRequest();
request.open('GET', 'http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3', true);
request.responseType = "arraybuffer";
request.onload = function () {
console.log('ciao')
    context.decodeAudioData(request.response, function (buffer) {
        buffer = buffer;
        data = buffer.getChannelData(0);
        //console.log(data);
        var canvas = document.getElementById('vis');
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext('2d');
        //console.log(data[500]*height);


        for (var i = 0; i < data.length; i++) {
            ctx.fillStyle = 'black';
            ctx.fillRect(i, height / 2, 0.5, (data[i] * height));
        }


    });
};
request.send();