<canvas id="canvas" width="600" height="600"></canvas>

<script>
	var AC = new AudioContext();

	var osc1 = AC.createOscillator();
	var osc2 = AC.createOscillator();

	osc1.start();

	var analyser1 = AC.createAnalyser();
	var analyser2 = AC.createAnalyser();

	var dataArray1 = new Float32Array(analyser1.fftSize); // Float32Array needs to be the same length as the fftSize
	var dataArray2 = new Float32Array(analyser2.fftSize);

	osc1.connect(analyser1);
	osc2.connect(analyser2);

	var canvas = document.getElementById("canvas");
	var canvasContext = canvas.getContext("2d");

	var draw = function(){
		analyser1.getFloatTimeDomainData(dataArray1);
		analyser2.getFloatTimeDomainData(dataArray2);

		canvasContext.clearRect(0, 0, canvas.width, canvas.height);

		canvasContext.lineWidth = 1;
		canvasContext.strokeStyle = "black";

		canvasContext.beginPath();

		for (let x = 0; x < canvas.width; x++){
			if (x === 0){
				canvasContext.moveTo(x, canvas.height / 2);
			} else {
				canvasContext.lineTo(
					x,
					dataArray1[x] * 60 + (canvas.height / 2)
				);
			}
		}

		canvasContext.stroke();


		requestAnimationFrame(draw);
	};

	requestAnimationFrame(draw);

</script>