JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='vis' width='800' height='200'></canvas>
</br>
<button id='button'>ZOOM</button>

CSS

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

JavaScript

var context = new webkitAudioContext();
var canvas = document.getElementById('vis');
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext('2d');

var request = new XMLHttpRequest();
request.open('GET', 'http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3', true);
request.responseType = "arraybuffer";

request.onload = function () {
    context.decodeAudioData(request.response, function (buffer) {
        buffer = buffer;
        data = buffer.getChannelData(0);
        //console.log(data);


        var step = data.length / width;
        //console.log(data[500]*height);


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


        }
    });
};

request.send();
$('#button').click(function () {
    alert("asdd");
    ctx.scale(20, 1);
});