JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<canvas id="canvas" width="1000" height="200"></canvas>
</body>

JavaScript

var count=0;
var samples=new Int32Array(48000*5);

var CANVAS_HEIGHT=200;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function processSamples() {
	var start = new Date().getTime();
	
	ctx.clearRect(0, 0, 1000, 200);
	for (var i=0; i < samples.length; i++) {
		samples[i]=parseInt(Math.random() * CANVAS_HEIGHT);
	}

	// We can't display each sample on it's own line... So take the average sample and display it
	// 1000 pixels for 5 second preview. So 200px per second. 48,000 samples per second / 200px = 240 samples per pixel
	var sample;
	for (var i=0; i < samples.length/240; i++) {
		sample=0;
		for (var j=0; j < 240; j++) {
			sample += samples[i*240+j];		
		}
		sample=parseInt(sample/240);
	
		ctx.fillRect(i, 0, 1, sample);
	}		
	if (count < 10)
		setTimeout(processSamples, 1000);	

	count++;
	var end = new Date().getTime();
	var time = end - start;
	console.log('Execution time: ' + time);	
}
window.onload=processSamples;