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 4.3KB over the wire.
Press ⌘K (or Ctrl+K) anywhere on this page. On a phone, tap the button below, because phones do not have a Cmd key.
<script src="musical-typing.js" defer></script>That is the whole installation. Download musical-typing.js, drop it next to your HTML, add the tag. It injects its own styles and builds its own markup.
| 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 | octave down and up |
| R | reverb |
| Esc | close |
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, which is 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 five CSS custom properties if you define them, and falls back
to its own defaults if you do not. Set them on :root:
:root {
--paper: /* panel background */
--ink: /* text and black keys */
--ink-soft: /* dimmed label text */
--rule: /* the drop shadow */
--accent: /* pressed keys */
--mt-font: /* must be monospace */
}Two notes. The font has to be monospace, because black-key positions are
measured in ch units. And if you already theme your site with
--paper and --ink, the panel follows your dark mode
for free.
Any element with id="cmdk" opens the panel when clicked. If you
want to wire something else, call it directly:
MusicalTyping.toggle()