Air Xylophone — Play with Your Hands

Colourful xylophone bars appear on your webcam feed. Hold your hand below the bars and flick fingers upward to strike them. 8 or 15 bars, real audio samples, completely free and private — all processing happens in your browser.

💡 Tip: Hold your hand below the bars, then flick a finger upward through a bar to strike it. Sweep across all bars for a fast glissando run.

Click here to Start

Camera Hand
Reverb
🔊

Last Struck

Hold hand below bars and flick upward to strike

How to Play

  1. Click Enable Sound first — browsers require a user tap to unlock audio. You'll hear a test note and the button turns green.
  2. Click the camera area to start — allow camera access when prompted. Sit ~50–80 cm from your camera in a well-lit room.
  3. Colourful xylophone bars will appear overlaid on your camera feed in the lower portion of the view.
  4. Hold your hand below the bars — when any fingertip flicks upward through the bottom edge of a bar, it strikes that note.
  5. Sweep left and right across the bars for a glissando, or aim precisely for individual notes.
  6. Switch between 8 and 15 bars using the controls above the camera to change the range.

How It Works

The xylophone is a percussion instrument with ancient roots, consisting of wooden bars arranged like a keyboard that are struck with mallets to produce bright, resonant tones. Unlike string instruments, the xylophone's sound is created by vibration within the solid wood bars themselves, amplified by resonator tubes beneath each bar. The bars are carefully tuned to specific pitches, with longer bars producing lower notes and shorter bars producing higher notes. In 8-bar mode, you get one octave of the C major scale — perfect for simple melodies and children's songs. The 15-bar mode extends this to two octaves, allowing more complex pieces and wider musical expression. The xylophone's clear, bell-like tone cuts through other instruments, making it essential in orchestras and marching bands. When you strike multiple bars quickly in sequence, you create a glissando effect — a sparkling roll of notes that showcases the instrument's percussive brilliance. The colorful bars help visualize the relationship between pitch and physical size in acoustic instruments.

Frequently Asked Questions

Does this send my camera feed to a server?

No. All hand tracking and sound synthesis runs entirely in your browser using JavaScript and WebAssembly. Your camera feed never leaves your device.

Why is there no sound when I strike the bars?

Browsers block audio until the user interacts with the page. Click the Enable Sound button first — it turns green and plays a test note. Then try striking the bars.

Why isn't my hand being detected?

Make sure you're in a well-lit room with your hand clearly visible in frame. Avoid bright windows behind you. Keep your hand roughly 40–80 cm from the camera.

What is the difference between 8-bar and 15-bar mode?

8-bar mode gives you one octave of the C major scale (C4 to C5). 15-bar mode extends to two full octaves (C4 to B5), allowing more complex melodies.

Can I use this on mobile?

Yes — it works on modern mobile browsers with a front-facing camera. Use Chrome or Safari on a recent device. Hand tracking is CPU-intensive on mobile, so performance may vary.

Related Instruments