~/simple-hand-tracking-chords 🖐️ hand synth 🎤 4 chords 📖 chord chart 🎹 piano ☕ Support me apps ← about me

simple hand tracking chords — play any song with chord gestures_

A spinoff of Hand Tracking Instrument, stripped down to one job: playing real songs. Your webcam sees 21 points on each hand. 20 essential chords — C · G · D · A · E · F · Bb · Am · Em · Dm · Bm · F#m · Cm · G7 · C7 · D7 · E7 · A7 · B7 · Am7 — one fixed hand gesture per chord · 15 synthesised instruments · two-handed play · record video + WAV. Free, no signup — and the camera feed never leaves your browser.
🆕 Want just 4 chords and a curated list of 100 real songs to play? Try 4 Chord Song Player →
VOICE Nylon Guitar L — R — HANDS 0 -- fps 0:00
right hand = majors · left hand = minors · tilt = 2nd row · pinch = 7ths · fist = silence
🎸

Play chords with your hands in the air

Allow the camera and your hands become 20 real chords — enough to strum along with most simple songs. Works best about an arm's length from the camera with a light source in front of you.

🔒 100% local — frames are analysed in this tab and never uploaded

Chord chart 20 chords

Fist silences a hand · watch the live chord name on screen and adjust your fingers until it matches.

Instrument 15 voices

Sound

72
38
18

Record

0:00
Captures the canvas exactly as you see it — camera, hand skeleton, chord names — with the synth audio mixed in. A clean 16-bit WAV of the audio is written at the same time.

Tracking & display

45
55

Guide — how to play a song with hand gesture chords

Two minutes from "allow camera" to strumming a real chord progression. No music theory required.
1Allow the camera

Press Start camera and accept the browser prompt. The hand model downloads once and is then cached, so the second visit starts almost instantly. Nothing is uploaded.

2Find a chord chart

Look up a beginner chart for your song. Most simple songs lean on a handful of open chords: G, C, D, Em and Am cover a large share of them.

3Learn the shapes

Check the Chord chart panel. Right hand for majors, left hand for minors, tilt the hand for the second row, pinch for 7ths.

4Play the progression

Show the gesture for the first chord, hold it, then switch shape for the next chord in rhythm, the way you would change shapes on a guitar neck.

5Strum and record

Flick your hand down to strum a held chord again. Press ● Record to save the take as video and a clean WAV.

What is in here

RIGHT HAND 7 major chords

Relaxed hand, not tilted and not pinching: show 1 to 5 fingers for C, G, D, A and E. Tilt the hand outward, fingers pointing sideways, and show 1 or 2 fingers for F and Bb.

1 · 2 · 3 fingers
C · G · D
4 fingers
A
Open palm
E
Tilted · 1
F
Tilted · 2
Bb
LEFT HAND 6 minor chords, plus B7

The same idea on the other hand: relaxed, 1 to 5 fingers for Am, Em, Dm, Bm and F#m. Tilted with 1 finger gives Cm, and the last tilted slot holds B7.

1 · 2 · 3 fingers
Am · Em · Dm
4 fingers
Bm
Open palm
F#m
Tilted · 1
Cm
Tilted · 2
B7 (the odd one out)
PINCH 👌 7th chords

Touch thumb to index finger. On the right hand, where you pinch across the frame picks the chord; on the left, a pinch anywhere is Am7.

Right pinch
Far left → far right: C7 · G7 · D7 · A7 · E7
Left pinch
Am7, anywhere in frame
Voicing
Root, third, fifth and seventh, plus the root an octave up
ALWAYS ON Universal gestures and keys

These work at all times, for either hand.

Fist ✊
Silences that hand at once
Flick down
Strums the held chord again
Hand height
Volume, raise the hand to swell
F · R
Fullscreen · start or stop recording
Space
Panic, silence everything
TWO HANDS Playing with both hands

Each hand is tracked and voiced on its own. For a normal song, follow the chart one hand at a time; hold a chord in each hand when you want a fuller blend.

G – Em – C – D
Right 2 · left 2 · right 1 · right 3
Blues run
Right pinch, slide C7 → G7 → D7 → A7 → E7
Two-hand pad
Am on the left, C7 on the right
TIP Getting a clean read

Watch the live chord name on screen. If it flickers between two chords, hold the shape steadier; most misfires happen on the way between finger counts, like passing 2 while going from 1 to 3.

Light
In front of you, plain wall behind
Frame
Keep the whole hand, fingertips too, in view
Smoothing
Raise it for a steadier chord name

Hand tracking chords: play real songs with 20 chord gestures

Simple Hand Tracking Chords is a free browser instrument that turns your webcam into a chord machine. It maps 20 common chords (C, G, D, A, E, F, Bb, Am, Em, Dm, Bm, F#m, Cm, G7, C7, D7, E7, A7, B7 and Am7) to one fixed hand gesture each, the chords a beginner guitarist learns first. You can take a song's chord chart from anywhere and play it in the air, with no music theory needed: you only need the chord names, and the Chord chart panel shows the hand shape for each one. There is no account and nothing to install.

The Hand Tracking Instrument has a Chord Conductor mode that thinks in scale degrees, so the same hand shape plays a different chord depending on the key you picked. This app is the opposite: each gesture always means the same named chord, so you never translate Roman numerals in your head.

How the gestures work

A hand landmark model returns 21 points per hand, and the app reads them for four things: which hand it is, how many fingers are extended, whether the hand is tilted outward, and whether the thumb is pinched to the index finger. That is enough to reach all 20 chords without overlap.

A fist means no chord, so you can drop a hand between chords without anything ringing on. Triads sound as four notes (root, third, fifth and the root an octave up) and 7th chords add the seventh as a fifth note, voiced around the middle of the range so they suit anything from Sub Bass to Concert Harp.

Gesture synth chords and hand tracking music

A gesture synth turns hand movements into sound. Most of them map the position of a hand to pitch, which makes melodies easy and songs hard. This one maps the shape of a hand to a whole chord, so holding up a gesture is like pressing a chord button on an autoharp or an accordion's bass side: the chord sounds in tune and in time with the strum, whatever your fingers were doing a moment before. That is why it suits playing along with songs. For melodies, loops and a backing band that follows you, the full Hand Tracking Instrument has six play modes and also works with a mouse or touchscreen.

How to play a whole song

Find a beginner chord chart for a song that uses open chords; most do. Show each chord's gesture in turn, in rhythm, and hold it as long as the chart says. A chord sustains while you hold the shape, and a quick downward flick of the hand strums it again with a fresh, slightly louder attack, so you can strum on the beat without changing your fingers. Hand height sets the volume, so raise your hand for the chorus. A G–Em–C–D song, one of the most common progressions in pop, is right-2, left-2, right-1, right-3. When learning, practise switching between just two chords first.

Fifteen instruments, none of them samples

The synthesis engine is shared with Hand Tracking Instrument, and every note is built live with the Web Audio API. Nylon Guitar and Concert Harp use Karplus-Strong synthesis, a physical model of a plucked string. Electric Piano and Vibraphone are two-operator FM. Struck Piano and Music Box are additive with inharmonic partials. Warm Pad, Bowed Strings, Choir Aah, Brass Section, Bright Lead, Retro Square and Sub Bass are subtractive, detuned oscillators through a filter envelope. Church Organ is a drawbar stack and Flute is filtered noise. Step through them with [ and ]; volume, reverb and delay are in the Sound panel.

Recording

Press Record (or R) and the page captures the canvas exactly as you see it, with camera, hand skeleton and live chord names, as a WebM video with the synth audio mixed in. At the same time it writes an uncompressed 16-bit WAV of the audio alone, ready for an audio editor or DAW. Switch the record button to audio only if you do not need the video.

Where the video goes: nowhere

The camera stream goes into a canvas and a hand-tracking model running inside your browser tab. It is not sent to a server, and the only recording that exists is one you start yourself, kept in memory until you download it or close the tab. Instrument, volume, reverb, delay and the tracking and display settings are saved in your browser's local storage. It is free, with no ads, no paywall and no watermark.

Browsers, phones and tracking tips

Chrome and Edge are fastest because they can run the model on the GPU; Firefox and Safari work too. The page needs a secure https connection and camera permission. On a phone or tablet use the front camera in landscape, propped up so both hands are free. For steady tracking, face a window or lamp, keep a plain wall behind you and keep your fingertips inside the frame. If small jitter changes the chord, raise Smoothing. Sensitivity sets how small a downward flick still counts as a strum. Fullscreen (F, leave with Esc) hides the page around the camera view, and Space silences everything.

More chord and hand-tracking tools

If 20 chords is more than you need, the 4 Chord Song Player strips it down to C, G, Am and F with 100 songs and a drum beat. The Hand Tracking Instrument adds air harp, air keys, theremin and drum pads. Want a beat behind your chords? Make one with the online drum machine in Drum Loop Studio and export it as a seamless loop. See how these chords are fingered on a real guitar or piano in the chord chart generator, tune up with the guitar tuner, or browse all the free music tools.

Hand Tracking Instrument5 play modes · 15 instruments · scales in any key Online Virtual PianoPlay piano with your computer keyboard · MIDI export Drum Loop StudioOnline drum machine & beat maker · WAV export Guitar TunerChromatic mic tuner · 18 tunings Audio EditorTrim, effects and export in the browser All toolsEverything on jasperbernaers.com

Quick guide