A playable piano for your website. Try it here, then press ⌘K, or Ctrl+K.
The panel calls itself Musical Typing, after the Logic Pro feature it borrows its key layout from.
One script tag, no dependencies, no build step, no audio files. Every sound is synthesized in the browser with Web Audio, so the whole thing is 13KB of source and under 5KB over the wire.
It started as an easter egg on aaronpeabody.dev and turned out to be the best part of the site, so here it is on its own.
<script src="https://cdn.jsdelivr.net/gh/apeabody007/cmdk-piano@1/musical-typing.js" defer></script>That is the whole installation. It injects its own styles and builds its own
markup. If you would rather not load from a CDN, copy musical-typing.js next
to your HTML and point the tag at that instead.
| keys | what |
|---|---|
A S D F G H J K L ; ' |
white keys |
W E T Y U O P |
black keys |
1 2 3 4 |
patch: keys, chiptune, synth, guitar |
Z X or - = |
octave down and up |
R |
reverb |
Space |
sustain: hold it like a pedal, or tap the chip to latch |
Esc |
close |
⌘K or Ctrl+K opens and closes it from anywhere on the page.
It is the Logic Pro musical typing layout, so if you have used that, your fingers already know this. It is polyphonic, and every control in the panel is clickable, so it works on a touchscreen too.
None of these are samples.
- keys is a triangle wave
- chiptune is a square wave
- synth is two detuned sawtooths through a lowpass filter
- guitar is Karplus-Strong, a burst of noise in a filtered feedback loop, pushed through a tanh waveshaper and a cabinet lowpass
Reverb is a convolver fed an impulse response generated at runtime: a noise burst with exponential decay, which is what a room sounds like.
The panel reads these CSS custom properties if you define them on :root, and
falls back to its own defaults if you do not.
| property | controls |
|---|---|
--paper |
panel background |
--ink |
panel text and borders |
--ink-soft |
dimmed label text |
--rule |
the drop shadow |
--accent |
pressed keys and the close button |
--mt-white |
white keys |
--mt-black |
black keys and key edges |
--mt-font |
the font, which must be monospace |
Three notes. The font has to be monospace, because black-key positions are
measured in ch units. If you already theme your site with --paper and
--ink, the panel follows your dark mode for free. And the keys deliberately
do not: they keep their own colors in every theme, because a piano's white keys
are still white in a dark room. Set --mt-white and --mt-black if you want
them to follow your palette instead.
Everything is scoped under .mt- class names, and the injected stylesheet goes
in as the first child of <head>, so your own CSS wins any conflict.
Any element with id="cmdk" opens the panel when clicked. Touch devices need
something like this, since phones have no Cmd key.
<button id="cmdk" type="button">🎹</button>To wire something else, call it directly:
MusicalTyping.toggle()Anything with Web Audio, which is every current browser. Audio starts on the first keypress rather than on load, which is what autoplay policies want anyway.
MIT.