Piano Keys is a music toy with 36 keys arranged in three stacked rows, one octave each, with the deepest notes along the bottom. Your browser builds each sound on the spot instead of playing recordings, so a note starts the instant you press. You can play Piano Keys unblocked with your computer keyboard, a mouse or a touchscreen. There’s no score or goal, just a place to try sounds and work out songs. Frank Force first wrote it to fit a piano into about one kilobyte of code, and this is his expanded version.
How to Play Piano Keys
Your computer keyboard maps onto the piano row by row, and each piano key shows its letter:
- Bottom letter row, Z to M: the lowest octave. Z is C, and the keys just above in the A row (S, D, G, H, J) are the black keys.
- Q row plus the numbers above it: the middle octave, laid out the same way. Q is C, and 2, 3, 5, 6 and 7 are the black keys.
- I, O, P, the brackets and the 9, 0 and = keys: the start of the top octave.
The comma, L, period, semicolon and slash keys are a second way to play the first five notes of the middle octave. That lets you play across the low-to-middle break with one hand.
With a mouse, press and hold a key, or hold the button and sweep across the keys to glide through a scale. A key glows red while it sounds, then fades back. When you let go, the note doesn’t cut off instantly. It fades out over about a third of a second, which keeps the sound smooth.
Voices and Wave Shapes
The four small icons at the top choose a voice. Each voice stacks several tones on top of each other to make its sound:
- Piano icon (the default): layers a note with tones one, two and three octaves up, which gives a bright, organ-like sound.
- Saxophone icon: uses only odd overtones, for a hollow, brassy sound.
- Violin icon: the note plus its first two overtones, a softer blend that leans toward strings.
- Wave icon: one single tone, pitched two octaves above the piano voice, good for hearing the wave shape on its own.
The Shape menu changes the wave used by every voice: sine, square, sawtooth or triangle. Sine sounds smooth and round, triangle is a bit brighter, and square and sawtooth sound buzzy. With four voices and four shapes, you get 16 different sounds.
Octave and Key Controls
With both set to 0, the bottom-left key on the piano voice is the C two octaves below middle C. Octave moves the whole piano up or down by full octaves, from -3 to +3. Key shifts it in half steps, from -12 to +12. Change them with the small arrows next to each box, because typing into the boxes is blocked.
These two controls make the same fingering play in a new range. If a song is too low on the Z row, raise the Octave by one instead of moving your hand.
Things to Try
- One note, four waves. Hold a single key and switch through every shape to hear how much it changes.
- Make a bass line. Play low notes on the Z row under chords on the Q row.
- Transpose a tune. Play a short pattern, change Key by a few steps, and play it again to hear it move.
- Build chords. Hold Q, E and T together for a C major chord, then try other groups of three.
- Learn a scale. The white keys from Q to U, then I, play a C major scale from C up to the next C.
- Compare voices. Play the same chord on each icon and pick your favorite.
A common mistake is mashing many keys at once. Each extra note adds more sound, so big clusters get loud and muddy fast. Three or four notes at a time sounds cleaner.
Phones, Chromebooks and Quiet Rooms
A laptop or Chromebook keyboard is the best way to play, since it covers 32 of the 36 notes. The four highest keys have no letter and need a click. On a tablet or phone you can touch and hold keys and play several at once, but the keys are small and there’s no letter guide.
Sound starts with your first key press, never before. This game makes noise by design, so wear headphones around others. Nothing is saved, so your voice and shape choices reset when you reload.
More Creative Games
If you like making things instead of winning, look through the casual games or try:
- PixelCraft for drawing pixel art and animating your own sprites.
- Typer if you’d rather use the keyboard for speed, hitting letters before they reach the core.
