MusicGen
Abdullah Chaudary··Updated
Project Name: Seven browser instruments built on Tone.js and Three.js, including a touch theremin.
Technologies: Vue.js Three.js Tone.js Web MIDI PWA
Project Links: Live Repository Available for similar engagements
Not one generator, seven instruments
The name undersells it. HomeView.vue instantiates seven separate instrument classes: TouchTheremin, Synth, Stylophone, SquareTone, CirclesTone, CirclesGridTone and CirclesGridBeat. Each one owns its own Tone.js graph and its own Three.js geometry, so switching instruments swaps both the sound and the thing you are touching to make it.
The theremin is the one worth opening first. A real theremin is played without contact, by moving your hands through two electromagnetic fields: one controls pitch, the other volume. TouchTheremin.js is 383 lines that map the same two axes onto a pointer, so position drives frequency and amplitude continuously rather than in steps. There are no keys, so there are no wrong notes, only a smooth surface where every position is some pitch.
What the title gets wrong
The live page title reads "MusicGen - Interactive Music Generator | Synth, Theremin & Camera-Based Music Creation". The synth and the theremin are both real. The camera is not. There is no getUserMedia call anywhere in the source, and the only camera in TouchTheremin.js is a Three.js PerspectiveCamera, which points at the scene, not at you.
I am leaving that here rather than quietly correcting the tab title, because the app is public and anyone can check it in a minute. Camera input is a reasonable thing to want on a theremin, given that the real instrument is played by moving through space. It just was not built.
Built in four days, and it shows
The repo has two commits, pushed between 20 and 24 September 2024. The evidence of that pace is still sitting in src/helpers/: alongside Stylophone.js there are Stylophone copy.js and Stylophone copy 2.js, the working files of someone iterating on an instrument at speed and never coming back to clean up.
It is a PWA (vite-plugin-pwa), so it installs and runs offline, and the interface fades its controls out while you play so the instrument is the only thing left on screen.
Links
Live: musicgen.abchaudary.me. Source: github.com/abdullahchaudary/musicgen.
next up
AlgoViz