p5js

(May have to reload a couple of times before it works properly!)

p5js also has WebGL support, so I did try to also make a cube here today. And this time, it did not take that long time and much less code. The code comes in under 2Kb while the WebGPU and WebGL were together more than 13Kb. But I did not have the same control. I did not find any way to coloring the vertices in the cube. I probably have to make one from scratch. And I  did not find any way to crop the video either. But there is support for webGL shaders. So I think I will also manage to reproduce the cube here, but not out of the box.

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! - p5js.org

Inside of this canvas is a frequency modulator with some sampling functionality. You can control the interface with keys or a mouse. For starting to play and turn off, you use the p key. The r key starts and stops the recording. There are two volume sliders. The a and s keys control the volume on the modulator. And you use the z and x keys to control the sample volume. With the c key, you clean the sampler or empty it. There will come a button for that later together whit some other things. Update: I have added the h key, and it will hold or freeze the tone.

There is some bug in the p5js library or WebKit ¹ that distorts the sound from the sampling. So this is not usable, but just a big enough programming challenge that it has been worth doing just for the practice.

1. https://github.com/processing/p5.js-sound/issues/494