JSFiddle - React, Tailwind, and code Playground

by atesgoral

HTML

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

JavaScript

const ctx = canvas.getContext('2d');

const actx = new AudioContext();
const sp = actx.createScriptProcessor(4096, 1, 1);
sp.connect(actx.destination);

sp.onaudioprocess = (e) => {
	const buff = e.outputBuffer.getChannelData(0);
  
  for (let i = 0; i < buff.length; i++) {
//  	buff[i] = Math.random() * 2 - 1;
  }
};

function draw(t) {
	ctx.fillRect((Math.cos(t/200) + 1) * 200, (Math.sin(t/300) + 1) * 150, 1.5, 1.5);
  req();
}

function req() {
	requestAnimationFrame(draw);
}

req();