The Piano

Piano in the Tools menu (or /piano) is a piano and synth in your browser: play it from the screen, from the computer keyboard, or from a MIDI keyboard. It works without an account.

Playing

On a phone, tap On first: it wakes the audio so the first note is not late (on a computer the first key does this by itself). Off silences the piano.

Tap or click the keys; slide across them for a run; on a touch screen, several fingers play several notes at once. The lower on a key you press, the louder the note. On a phone the keys stand on end, running down the screen with the low notes at the bottom and the black keys along the left; only as many keys show as fit at a comfortable size (about an octave and a half), and the octave buttons or the arrow keys move the window. Press nearer the right edge for a louder note.

On the computer keyboard the bottom row is the first octave: Z X C V B N M are the white keys from C, with the sharps on the row above them (S D G H J), and the row from Q plays the octave above, with its sharps on the number row. The letters are printed on the keys; the small keyboard button beside the octave hides them. The arrow keys move the keyboard an octave up or down (or use the − and + beside the octave), the space bar is the sustain pedal while you hold it (Sustain switches it on to stay), and Esc stops everything.

Sounds

The metronome button in the More row opens a small menu: start or stop it (the button lights while it runs and the icon swells on the downbeat), set the tempo, or Tap it in; the screen shows the tempo and the beat while it runs. On a phone it is a section of the sliders menu, which now opens one section at a time: Metronome, Presets, Volume, Effects and More.

The screen names the chord you are holding (with its numeral when a key is lit) and, on a wider screen, shows the notes on a small treble staff beside it, spelled in flats in a flat key and sharps otherwise; with the arpeggiator on, the note it is playing lights up on the staff.

Arp, beside the octave buttons on a wider screen (an Arpeggiator section of the menu on a phone), makes held keys play one at a time in time with the session tempo instead of together: hold a chord and it runs up, down, up and down, as played or at random, through one to three octaves, at quarter, eighth, triplet or sixteenth notes, at the session tempo or half or double it, with the session swing. A chord built up a key at a time joins the pattern as it grows, and one key held alone plays as a chord: the triad on its degree of the key (the second degree of C major is D minor); (the Arpeggiator menu sets the key as the Key button does, and "A single key plays as a chord" switches the trick off). Patterns line up with bars, and a new chord lands on the beat: pressed a little early it waits for the beat, a little late it falls into place on the next step. Latch keeps the pattern going after you let go (double-click or double-tap the Arp button to latch and unlatch; a padlock shows while latched); ESC stops it. The arpeggiator's settings are saved with presets.

Presets keep a sound and its effects under a name: five buttons numbered 1 to 5 hold the site's starting presets, and the screen shows the name of the one you are on (with "edited" once you move a slider). Click a button to load its preset. To save the sound you have, ⌘-click (Ctrl-click on Windows) or press and hold a button, give it a name and save; signed out, it lives in this browser, and signed in, it goes to your account where every member can use it. The bookmark button beside the slots opens the full list: save without taking a slot, search, rename, move a preset to a button, delete, or copy a link that opens the piano with that preset for anyone. The five buttons sit on the face of the device at every width.

Sound chooses between a Grand Piano (a sampled concert grand), an Electric Piano, an Organ, a Synth Lead, a Pad, a Pluck, an Electric Bass (a sampled fingered bass, an octave down), an Acoustic Guitar (a sampled nylon-string classical guitar) and an Electric Guitar (direct) (a sampled Fender's raw pickup signal, dry, made for the Practice Amp). The two sampled instruments fetch their notes only when you choose them, a megabyte or so between them, and each note plays from its own recording as soon as that one is in. The Grand Piano arrives in stages: a first set of samples in a moment (the screen says "loading the piano…" until then), then a fuller set with four velocity layers in the background on the piano page, and, if you press High Fidelity (in the More section of the settings menu), a lossless set with six layers and the sound of each key's release, about 72 MB once; your browser keeps it for next time and the piano remembers the choice. Volume is yours to set, and Effects opens a drawer per effect, one open at a time, each header saying how much of it is on: the reverb (its level and the size of the room), a delay (its level, time and feedback, with a choice of clean Digital repeats or Analog ones that darken and soften as they go, with a slow tape-like wobble), a fuzz (drive and tone), a wah (Touch opens the filter with how hard you play, Sweep moves it on its own; range and resonance shape it, and a MIDI mod wheel or expression pedal rides it while you use one), a chorus (mix, rate and depth), a phaser or a flanger (one or the other, with mix, rate and depth), a tremolo (depth, rate, and Smooth or Chop) a rotary speaker (Off, Slow or Fast, the rotors spinning up and down between them) and a tone section (Tilt from dark to bright, Air for sparkle a dull sound never had, Bottom for bass that feels bigger without getting louder), a compressor (first in the chain, where the electric bass wants it: Amount squeezes the loud notes down towards the quiet ones, with the ratio, attack, release and make-up gain under it and a bar showing how much it is holding back as you play) and a stereo bounce (the sound swung left and right in time with the session tempo: Depth is how far, Switches how often, from every eighth to every two bars, Glide how much of each step it spends on the way, a jump or a smooth sweep, and L C R stops in the middle on the way across where L R goes straight over); the button lights while any of them is up, and Reset all to defaults at the bottom of the menu puts every effect back as the piano starts, the sound untouched; the piano remembers the sound, the octave, the levels and the effects in your browser.

The presets are one library for every instrument on the piano engine: a sound saved here can go on a chord player button and the other way round, each instrument with its own five buttons.

Key and chords

Scale Guides, in the settings menu (the sliders icon), set the key the piano thinks in, C major to begin with: choose a root and a scale (major, minor, harmonic minor, the pentatonics, blues, dorian, mixolydian, lydian). The key alone changes nothing on the keyboard; Dots marks the keys in it, the root stronger, while the keys outside it go a shade darker, and 1–7 numbers the keys by their degree in place of the letters; Turn Off All Guides clears both. The Arpeggiator menu offers the same key and scale choice. The screen names what you hold: a note, an interval ("a fifth"), or the chord (C, Am7, Gsus4, F♯dim, with an inversion as a slash chord, C/E), and in a key the chord's Roman numeral too, so G B D in C major reads "G · V". On a phone the key lives in the levels menu.

A MIDI keyboard

Plug a MIDI keyboard or pad in and press Enable MIDI Control in the MIDI section of the settings menu: the browser asks once, and from then on the controller plays the piano, with its velocity and its sustain pedal. This works in Chrome and Edge; other browsers do not offer MIDI to web pages yet.

The Grand Piano is the Salamander Grand Piano, Alexander Holm's recordings of a Yamaha C5, shared under the Creative Commons Attribution 3.0 license, in the subset published by Tone.js. Thank you.

Share, in the More row (a Share section of the settings menu on a phone), copies a short link on shvl.me that opens the piano with this sound: the instrument, its effects and settings. The presets' manage menu copies a link to any saved preset too.