web-audio-playground.html

<canvas id=c style="border:1px solid"><script>

A = new AudioContext
C = c.getContext`2d`

a = A.createAnalyser()
s = A.createScriptProcessor(a.fftSize=b=1024,t=0,1)

s.connect(a)
a.connect(A.destination)

// square wave generator
q = f => {h=0;for(j=1;j<99;j++)h+=Math.sin(f*(2*j-1))/(2*j-1);return 4/Math.PI*h;}

// frequency to play around with
f = 0

s.onaudioprocess = e =>
{
	o = e.outputBuffer.getChannelData(0)
	
	for(i = 0; i < b;) o[i++] = q(t++/A.sampleRate * Math.PI*2 * f)*.1

	f += .5

	a.getByteFrequencyData(d = new Uint8Array(b/2))

	for (j = 0,l=d.length/4; j < l; j++)

	C.fillRect(
		// x (time)
		(t/b|0)%c.width,
		// y (frequency)
		c.height-j/l*c.height|0,
		// 1 pixel
		1,1,
		// opacity (amplitude)
		C.fillStyle = "hsl("+[0,"0%",100-Math.pow(d[j]/255,10)*100+"%"]+")"
	)
}


</script>