Browser-Based Melodica Instrument

Pocket Melodica turns your laptop or phone microphone into a breath controller — hold a key on the on-screen keyboard and blow to play notes, just like a real melodica.

What it is

Pocket Melodica is a browser instrument that maps breath to sound. Hold down a key on the on-screen piano keyboard and blow into your microphone — the app listens for air, measures its intensity, and produces a sustained melodica-style tone for as long as you keep blowing. It runs entirely in the browser, no plugins, no installs, works on both desktop and mobile.

How it works

The Web Audio API and MediaStream API do the heavy lifting. The app continuously samples microphone input, runs it through a breath-detection algorithm with configurable sensitivity, and maps the resulting amplitude envelope to a synthesized tone tied to whichever key is currently held. A dedicated STEADY AIR mode smooths out the breath envelope for players who want a more consistent tone without worrying about perfectly even lung pressure. There’s also a recalibrate button for noisy environments, and the keyboard supports two layouts — Pocket (5 octaves) and Full (32 keys) — so it scales naturally from phone to laptop screen.

The build

The interface follows the Instrument Digital Tools design language: black ground, #111 surface panels with tight 1px borders, and lime (#EDFF5A) reserved exclusively for active states. Keys light up lime when pressed. The breath visualizer at the top — a dot-matrix grille with a glow effect — pulses with microphone activity, giving visual feedback for what your lungs are doing. Keyboard shortcuts are mapped across the full QWERTY layout so desktop players can actually perform with it.

Why it matters

This experiment sits at an interesting edge: using the microphone not as a recording device but as a physical input controller. That framing opens up a lot of territory. The same breath-detection approach could power accessibility interfaces — hands-free computer interaction for users with limited motor control. It could drive generative visuals that respond to breath tempo and intensity. Or it could become a classroom instrument — every kid in a school already has a microphone in their pocket. Pocket Melodica proves the concept is viable, playable, and genuinely fun, which is usually where the interesting ideas start.