JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.26/howler.min.js"></script>
<button onClick = 'stop()'>Stop</button>
<button onClick = 'start()'>Start</button>
<br>
<canvas width = "400" height = "200" id = "canvas" > <canvas>

JavaScript

var sound = new Howl( 
    {
        urls:["https://playcanvas.com/api/files/assets/2004687/1/Datsik%20&%20Kill%20The%20Noise%20-%20Lightspeed.mp3"],
        volume: 0.1
    });

var start = function() {
    sound.play();
}
    
var stop = function() {
    sound.stop();
}
var canvas,ctx2d, audioAnal;
var data = null;

var init = function() {
    canvas = document.getElementById("canvas");
    ctx2d = canvas.getContext('2d');
    audioAnal = Howler.ctx.createAnalyser();
    console.log(audioAnal);
    data = new Uint8Array(audioAnal.fftSize);
    audioAnal.getByteTimeDomainData(data);
     console.log(Howler.ctx);
}
var draw = function() {
    ctx2d.fillStyle = "#000000";
    ctx2d.fillRect(0, 0, canvas.width, canvas.height);
    
    audioAnal.getByteTimeDomainData(data);
    var samples = 48;
    var dataLen = data.length;
    var dl = Math.floor( dataLen / samples);
    console.log(Howler.ctx.state);
    ctx2d.fillStyle = "#00cc00";
    for( var i=0; i < samples ; i++) {
        var h = 128 - data[i*dl];
        ctx2d.fillRect(i*10, (canvas.height - h) / 2, 8, h);    
    }
}
init();

setInterval(draw.bind(this), 1000/60);