Skip to content

Online Instruments — Play Piano, Guitar, Drums and Otamatone by Mouse, Touch or Keyboard

A browser instrument playground with four instruments — piano, guitar, drums and an Otamatone — that you can play right away with a mouse, touch or your computer keyboard. Every sound is synthesized on the spot with the Web Audio API, with no sample files or external servers.

70%

Piano

Click the keys or press them with a finger. Drag sideways while holding to keep playing (glissando). The small letters on the keys show the matching computer keys.

Tone
Options
Key size
Range in viewC3 – C6

All 88 keys (A0-C8) are here. Drag the bar above the keyboard, or use the octave buttons, to move the window — the highlighted strip above the keys marks the two octaves your computer keys are currently mapped to. Keys: bottom row white Z X C V B N M , · black S D G H J. Top row white Q W E R T Y U I · black 2 3 5 6 7.

Guitar

Click a string or pluck it with a finger. Swipe up or down while holding to sound several strings in order (strum). Every note is freshly synthesized with Karplus-Strong string synthesis.

E2 · 6th 1
A2 · 5th 2
D3 · 4th 3
G3 · 3rd 4
B3 · 2nd 5
E4 · 1st 6
Strum a chord

Keys: number keys 1–6 map to strings 6 (low E) through 1 (high E).

Drums

Tap the pads. Every hit is synthesized on the spot by shaping noise and oscillators with filters and short envelopes — no samples.

Hit the middle of the snare for a snare (Z), its hoop for a rimshot (C). Keys: Q crash · W open hat · E closed hat · A high tom · S mid tom · D floor tom · Z snare · X kick · C rimshot · V clap.

Otamatone

A pitch slider modelled on the Otamatone, the Japanese toy instrument. Press or drag along the neck and the pitch glides smoothly.

Options

C3

You can also play it from the keyboard — same layout as the piano (bottom row Z…, top row Q…I).

FAQ

How are the sounds made? Are they mp3 samples?
No, there are no sample files at all. Every sound is synthesized moment by moment with the browser's built-in Web Audio API. The piano and Otamatone run oscillators through filters, the guitar uses Karplus-Strong (a string-synthesis technique that feeds a short burst of noise into a decaying delay line) for plucked notes, and the drums wrap noise and oscillators in short envelopes to imitate hits.
I pressed it but there's no sound
Browsers block audio until you interact with the page once (the autoplay policy). Tap any key, string, pad or the neck once. On an iPhone, also check the silent switch on the side.
Can I play several notes at once?
Piano, guitar and drums each sound independently with multi-touch or several keys pressed together. The Otamatone, like the real instrument, plays only one note at a time — press several spots and the most recent one wins.
What is an Otamatone?
A toy-meets-instrument from the Japanese company Maywa Denki. You set the pitch by pressing the stem attached to its head-shaped body, and squeeze the body to open and close its mouth as it sounds. Here, dragging along the neck glides smoothly between notes, just like the real thing.

Related tools