JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

var canvasCtx = $("canvas")[0].getContext("2d");
var audioCtx = new window.AudioContext();
var analyser = audioCtx.createAnalyser();

navigator.mozGetUserMedia({audio: true},                           
function(stream) { 
   var source = audioCtx.createMediaStreamSource(stream);  
   source.connect(analyser);
}, function() {} );
        
var WIDTH = 400, HEIGHT = 200;
canvasCtx.canvas.width = WIDTH;
canvasCtx.canvas.height = HEIGHT;

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);   

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
    drawVisual = requestAnimationFrame(draw);
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    analyser.getByteTimeDomainData(dataArray);
    canvasCtx.beginPath();
    
    var sliceWidth = WIDTH * 1.0 / bufferLength;
    var x = 0;

    for(var i = 0; i < bufferLength; i++) {
                           
        var v = dataArray[i] / 128.0;
        var y = v * HEIGHT/2;
       
        if(i === 0) {
            canvasCtx.moveTo(x, y);
        } else {
            canvasCtx.lineTo(x, y);
        }
        
        x += sliceWidth;        
                    
         
     }

     canvasCtx.lineTo(WIDTH, HEIGHT/2);
     canvasCtx.stroke();

}
 
draw();