JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="1000" height="400" style="border:1px solid #000000;"></canvas>

JavaScript

$(document).ready(function () {
			var ctx = document.getElementById("myCanvas").getContext("2d");
			
			function hasGetUserMedia() {
			  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
			            navigator.mozGetUserMedia || navigator.msGetUserMedia);
			}

			if (hasGetUserMedia()) {
			  	
			  	// this is to store a reference to the input so we can kill it later 
				var liveSource;

				// creates an audiocontext and hooks up the audio input
				function connectAudioInToSpeakers(){
				  var context = new webkitAudioContext();  
				  navigator.webkitGetUserMedia({audio: true}, function(stream) {

				    liveSource = context.createMediaStreamSource(stream);

					// create a ScriptProcessorNode
				    if(!context.createScriptProcessor){
				       node = context.createJavaScriptNode(2048, 1, 1);
				    } else {
				       node = context.createScriptProcessor(2048, 1, 1);
				    }


				    node.onaudioprocess = function(e){

						ctx.clearRect(0, 0, document.getElementById("myCanvas").width, document.getElementById("myCanvas").height);
						document.getElementById("myCanvas").width = document.getElementById("myCanvas").width;
						ctx.fillStyle="#FF0000";
						var buf = new ArrayBuffer(2048);
						for(var i in e.inputBuffer.getChannelData(0)) {
							buf[i] = e.inputBuffer.getChannelData(0)[i];
							ctx.fillRect(i/4,buf[i]*500+200,1,1);
						}

						var outData = e.outputBuffer.getChannelData(0);
						var inData = e.inputBuffer.getChannelData(0);

					    // Loop through the 4096 samples, copy them to output buffer
					    for (var sample = 0; sample < e.outputBuffer.length; sample++) {
					      // Set the data in the output buffer for each sample
					      outData[sample] = inData[sample]; //Modify your buffer here if you want
					    }
					    console.log(outData);
				    }

				     // connect the ScriptProcessorNode with the input audio
				    liveSource.connect(node);
				    // connect node to box
				 ...