A browser theremin with MediaPipe and Web Audio

A theremin you play with your hands in the air, in the browser: it tracks your hands through the webcam with MediaPipe and synthesises sound in real time with the Web Audio API.

👉 Try it live: thereminsimulator.aaranda.es (requires camera permission).

How it works

The right hand controls pitch (higher = more treble) and the left hand controls volume. Under the hood, HandLandmarker from @mediapipe/tasks-vision tracks the hands in video mode with a GPU delegate, and the audio graph chains OscillatorNode → GainNode → BiquadFilterNode to the output, an AnalyserNode (oscilloscope) and a MediaStreamAudioDestinationNode (for recording).

Extras

Scale quantization (chromatic, major, minor, pentatonic, blues or free), 4 waveforms, a real-time oscilloscope, presets in localStorage with JSON import/export, recording via MediaRecorder, a multilingual UI (EN/ES) and a retro-futuristic neon look. Built with Vite + React 18.

Source on GitHub.