Free online theremin: play by waving your hand, and make your own

What is a theremin?

A theremin is an electronic instrument you play without touching it. It has two metal antennas. Moving one hand towards the upright antenna makes the note higher, and moving your other hand towards the loop-shaped antenna makes it quieter. The result is that famous swooping, wobbly, slightly ghostly sound.

It was invented around 1920 by Léon Theremin (Lev Termen in Russian), a Russian physicist who was researching electronic sensors, not music. Inside, two oscillators hum along at almost the same very high, unhearable pitch. Your hand acts like part of the circuit and nudges one of them, and the small difference between the two is a note you can hear.

There are no keys or frets, so finding each note takes a good ear and a very steady hand. That's why great players such as Clara Rockmore are so admired. Players add vibrato by gently wobbling their pitch hand.

• In films: it gives the eerie feel to classic scores such as Spellbound (1945) and The Day the Earth Stood Still (1951), and became the sound of 1950s science fiction.
• Good Vibrations: the "wooo-ooo" in the Beach Boys song is often called a theremin, but it was really an Electro-Theremin, a close cousin played with a slider.
• Synthesisers: Robert Moog built and sold theremins before he made his famous synthesisers.
• Google: a 2016 Google Doodle celebrating Clara Rockmore let millions of people try a theremin in their browser.

This online theremin copies the idea. Your mouse, finger or hand takes the place of the antennas, and your browser's built-in sound engine (the Web Audio API) makes the tone. In webcam mode it works like the real thing: your right hand sets the note and your left hand sets the volume.

Your own theremin that you play by waving your hands

You'll describe the theremin to a free AI assistant, paste what it writes into a file, and play it. It's built in six stages, and the webcam stage is the most ambitious thing on this site, but you still won't write any code yourself.

• A big glowing play area: left to right is the note, up and down is the volume
• A theremin sound made entirely by code, with natural vibrato, echo and reverb, and five sounds to choose from
• Snap to notes (major, minor pentatonic, blues and more), so it's easy to play in tune
• A visualiser that draws the real shape of the sound, with glowing trails
• Webcam mode: wave your hands to play, with the video staying on your computer
• A Record button with WAV download, a "play a tune" guide, two-finger touch and keyboard controls

Good for: anyone curious about what a theremin sounds like, families wanting spooky sounds for Halloween, music teachers explaining pitch and volume, and anyone who's built the virtual piano or beat maker and wants a bigger challenge.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. The AI tries to do too much, something breaks, and it's hard to tell what. So this guide builds the theremin in stages. After each stage, check it works and save a copy (theremin-v1.html, theremin-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The demo at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. Ask for a mouse theremin

   Start with the simplest theremin there is: one tone that follows your mouse. Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me an online theremin that runs in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it.
   - No external libraries, no sound files, no internet connection needed. Make the sound with the Web Audio API.
   - A big dark play area that fills most of the window. Moving the mouse from left to right changes the pitch, from C3 on the left to C6 on the right. Each note should take up the same width, so work in notes (semitones), not in hertz.
   - Moving up and down changes the volume: loud at the top, silent at the bottom.
   - Browsers only allow sound after a click, so start the sound when I first click the play area. After that it plays whenever the mouse is over the play area, and goes quiet when the mouse leaves.
   - Use one sine wave oscillator that runs all the time. Change its frequency and volume smoothly with setTargetAtTime (about 0.04 seconds), so it glides between notes and never clicks.
   - Show the name of the nearest note (like A4) and the frequency in hertz in big letters in a corner.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as theremin.html and double-click it. Click the dark area and move your mouse slowly from side to side. Then save a copy as theremin-v1.html.

   No sound? Browsers only allow sound after you click something on the page, so click the play area first. Check your volume, then tell the AI exactly what happens.

2. Make it sound like a real theremin, and add scales

   A plain sine wave sounds like a test tone. A few quiet harmonics, a vibrato that behaves like a real hand, and some echo turn it into an instrument. Snapping to a scale makes it much easier to play a tune.

   Copy this promptCopy

   That works, thank you. Now please make it sound like a real theremin and easier to play in tune:
   - Replace the plain sine wave with a PeriodicWave: mostly the fundamental, plus quiet 2nd, 3rd and 4th harmonics, for a warm, slightly reedy tone.
   - Add vibrato with a second oscillator (an LFO, about 5.5 times a second) connected to the main oscillator's detune. Make it behave like a real player's hand: almost no vibrato while I'm sliding between notes, then it gently blooms over half a second when I hold a note still.
   - Add an echo (a DelayNode with feedback through a low-pass filter) and a reverb (a ConvolverNode with an impulse response made in code from about 3 seconds of fading random noise). Put a compressor at the very end so it never distorts.
   - Five sound buttons: Classic, Sci-fi (pure tone, wide fast vibrato, lots of echo), Warm (more harmonics through a low-pass filter), Ghostly (two slightly detuned oscillators, slow vibrato, huge reverb) and Chiptune (square wave, very quick glide). Each one sets the sliders below.
   - Sliders for Vibrato, Glide, Echo and Reverb, plus a master Volume slider and a Mute button.
   - A "Snap to notes" choice: Off (smooth, like a real theremin), Chromatic, Major, Minor pentatonic and Blues, with a menu for the key (C to B). When snapping is on, round the pitch to the nearest note in the scale, but keep the glide so it still swoops from note to note.
   - A Range choice: Low (C2 to C5), Middle (C3 to C6), High (C4 to C7) and Wide (C2 to C7).
   - Draw faint vertical lines in the play area for every note, brighter for the notes in the chosen scale, and label each C (C3, C4 and so on).
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac). Happy with the sound? Save a copy as theremin-v2.html.

3. Add a glowing visualiser

   This is the part that makes people say "how did you make that?" The line you see is the real shape of the sound, so it changes with every preset.

   Copy this promptCopy

   Please add a glowing visualiser to the play area:
   - An AnalyserNode connected to the theremin's sound before the echo and reverb. Every frame, draw the actual waveform across the middle of the play area as a glowing line. Find where the wave crosses zero going upwards and show about two and a half cycles, so the shape stands still and I can see it change with each sound.
   - A soft glowing orb where the mouse is, bigger when it's louder, with a fading trail behind it. Fade the old picture out a little each frame instead of clearing it, so movements leave light trails.
   - Little sparks that fly off the orb when I move quickly.
   - A different glow colour for each sound, and a background that glows softly in that colour too.
   - Use requestAnimationFrame, and keep the canvas sharp on high-resolution screens (devicePixelRatio).
   - The visualiser is part of the instrument, so keep it running even if my computer is set to reduce motion. If prefers-reduced-motion is on, only turn off the sparks.
   
   Send me the complete updated file.

4. Play it by waving your hands

   Now the clever part, and the reason this is a Stretch project. There's no AI and no face detection here. The page takes a snapshot of you with your hands down, then looks for whatever has changed since. The highest changed spot in each box is your hand.

   Copy this promptCopy

   Now please add a "Wave your hands" button that lets me play the theremin with my webcam, like a real theremin's two antennas. No AI, no libraries, no downloads: plain JavaScript only.
   - When I press the button, ask for the camera with getUserMedia (front camera, 640 by 480, no microphone). Show the video behind the play area, mirrored like a mirror and faded, so I can see myself.
   - Draw two dashed boxes over the video: PITCH on the right of the screen and VOLUME on the left. My right hand's height in the Pitch box sets the note (higher hand, higher note). My left hand's height in the Volume box sets the volume, and the volume stays where I left it when I take that hand away. When my right hand leaves the Pitch box, the sound fades out.
   - Tracking: for each new video frame, draw the mirrored video into a tiny hidden canvas (about 96 pixels wide) and read its pixels.
   - Calibrate first: show a 3, 2, 1 countdown saying "Hands down and keep still", then take about 20 frames and store the median colour of each pixel as the background. The median ignores anything that moves past.
   - After that, a pixel counts as "hand" if its colour is further from the background than a threshold. First subtract the median difference across the whole picture, so the camera's automatic brightness changes don't fool it. Ignore lone pixels by needing at least 4 of their 8 neighbours to count as well.
   - In each box, the hand is the highest group of "hand" pixels (the top of a raised hand). Use the average position of the hand pixels in a thin band just below that top point.
   - Smooth the hand position with a One Euro filter, so it's steady when I hold still but quick when I move. Only decide a hand has arrived after 2 frames in a row, and that it has gone after about 8 frames without it.
   - Let the background slowly follow changes in the room, and recalibrate by itself if most of the picture suddenly changes. Add a Recalibrate button and a Sensitivity slider.
   - Draw a dot on each hand it finds, tint the changed pixels pale pink so I can see what the camera notices, and show "Pitch hand: found" and "Volume hand: found".
   - Show a note saying the camera picture is only looked at on this computer and is never recorded, saved or sent anywhere. Never upload anything.
   - If the camera is blocked, missing or being used by another app, show a friendly message and go back to mouse mode. Add a Stop camera button that really turns the camera off.
   
   Send me the complete updated file.

   Press Wave your hands, allow the camera, and sit about an arm's length away with your face in the middle. Keep your hands down until it says Ready, then raise your right hand into the Pitch box and move it up and down.

   Light matters. It works best with light on your face and hands, not a bright window behind you. If the dot jumps about, press Recalibrate and keep still while it counts. Save a copy as theremin-v4.html once it works.

5. Record and download what you play

   Copy this promptCopy

   Please add a Record panel:
   - A Record button that records exactly what I hear (after the echo, reverb and volume), up to 60 seconds, with a timer. Press it again to stop.
   - Capture the sound with an AudioWorklet loaded from a Blob URL made in the code (so there are no extra files), and fall back to a ScriptProcessorNode in browsers without AudioWorklet.
   - When I stop, turn the recording into a 16-bit stereo WAV file in the browser. Add a "Play back" button, and a "Download WAV" button that saves it as my-theremin.wav.
   - Keep everything on my device. Don't upload it anywhere.
   
   Send me the complete updated file.

   A WAV file opens in almost anything: GarageBand, Audacity, a video editor, or just your music player. Try recording a sci-fi "flying saucer landing" for a home movie.

6. Polish: two fingers, keyboard, play a tune and phones

   Copy this promptCopy

   Please polish it:
   - Touch: use pointer events so a finger works on phones and tablets, and a second finger plays a second voice at the same time. Set touch-action: none on the play area.
   - Keyboard: when the play area is focused, Space starts and stops a note, the left and right arrows move one note (one scale note when snapping is on), up and down change the volume, and M mutes. Make every button work with the Tab key, with a visible focus ring.
   - A "Play a tune" panel with tunes that are free to use: Twinkle, Twinkle, Little Star; Ode to Joy; Frère Jacques; and the chorus of Jingle Bells. Store each as a list like "C4 C4 G4 G4 A4 A4 G4:2". When I press Start, the next note glows as a lane in the play area, with a strip of upcoming note names and a progress bar. Holding the right note for a moment moves on. For a repeated note, let me dip down and back up, or just keep holding. Add a "Listen first" button that plays the tune on the theremin while the glow moves.
   - On iPhone, create and resume the AudioContext inside my first tap, play a silent sound, and set navigator.audioSession.type to "playback" where it exists. If the tab is hidden, fade all sound out so nothing gets stuck.
   - Save my sound, sliders, scale, key and range in localStorage.
   - A full screen button for the play area, and make the whole page fit nicely on a phone with no sideways scrolling.
   
   Send me the complete updated file.

   To play your theremin on your phone or share it with friends, put it online for free. See Putting your project online for free. Phones only allow the camera on pages served over https, which free hosting gives you.

Quick fixes

Sometimes the theremin keeps playing when it should stop. Please fade the volume to zero on pointerleave, pointerup, pointercancel and lostpointercapture, when the camera loses my pitch hand, and when the window loses focus or the tab is hidden. Send me the complete fixed file.

Questions people ask

Twist it into something else

Once the hand tracking works, your webcam can play all sorts of things:

Made something you're proud of? Share it and tag us. We feature reader projects.

The spookiest instrument, made from one wave

There are a few theremins online, but most are a box you drag your mouse across. Building your own shows you that the eeriest instrument there is comes down to one wave whose pitch and loudness follow your hand. It also shows you how a plain webcam can become a motion sensor by asking one simple question, again and again: "what's changed since a moment ago?" And it's proof that you can make something genuinely clever by asking for it one stage at a time.

What to build next