Virtual Piano — Reference Notes for Singers
Sampled virtual piano in the browser: mouse or touch on keys, optional two-zone computer-keyboard performance with sustain, per-hand octaves, visible-range scroll, and up to ten chord sets you can edit, save, and fire together—saved in this browser’s local storage (mb-piano-prefs) so your layout and chord sets return on the next visit. No MIDI plug-in; use alongside the pitch analyzer when you want to see intonation.
Use the piano keyboard to find your starting note before singing
Tap or key a pitch, internalize it, then sing — useful for cold starts, audition excerpts, and checking entrances against a stable reference.
How to check your vocal range with a virtual piano
Shift the visible octave range and per-hand octaves, then play upward or downward until you find comfortable lows and highs on a steady vowel; note letter names to track range over time.
Reference tones for pitch matching practice
Hold a reference tone, match on “ah” or “ee”, or outline intervals with two-hand typing patterns; chord sets can spell arpeggiated or block voicings when you program them.
How to Use the Virtual Piano
Each key plays a preloaded sample for that pitch. The layout splits into a left-hand zone (lower keyboard row) and a right-hand zone (upper row on QWERTY): each zone maps 13 consecutive semitones from a configurable starting pitch class, with its own base octave. The strip of visible keys on screen is controlled separately (start octave + arrow buttons, or Q / ] on the keyboard). Sustain keeps notes ringing like a damper pedal; blur, focus loss, tab hide, or mouse leaving the window resets stuck keys. Visible range, per-hand octaves, start notes, and all ten chord sets persist in localStorage under mb-piano-prefs for this site origin and load again when you reopen the page.
Mouse and touch
- Click or tap white and black keys to play and release. Touch targets follow the on-screen keyboard; landscape on tablets usually shows more keys.
- When keyboard mode is ON, keys that have a computer-letter mapping show a small label on the key cap.
Computer keyboard mode (⌨)
- Turn ON with the on-screen “⌨ ON” button or press the apostrophe key ' — even while OFF, ' alone toggles input so you are never locked out.
- While ON, most letter/number keys are captured (preventDefault) so the page does not scroll; Ctrl / Alt / Meta combinations and F-keys are left for the browser.
- Escape stops every held note and clears stuck states after alt-tab or missed key-up events.
Octaves and range
- ◀ ▶ (octave control): move the visible key window by one octave (same as Q one octave down, ] one octave up on the keyboard). Bounds are clamped so the window stays in a playable range.
- - and _ : shift the left-hand base octave down (−) or up (+ on US layout, Shift + hyphen). = and + : shift the right-hand base octave down or up ( + is often Shift + = ).
- b / g : transpose the left-hand key row mapping down or up by one semitone (which PC letter maps to C, etc.). n / h : same for the right-hand row. The same shifts are available with the ◀ ▶ arrow buttons next to each hand’s range readout (works even when ⌨ is OFF).
Sustain
- Hold Space while keyboard mode is ON, or click Sustain, to latch notes until you release Space or turn sustain off again.
Chord slots (10 savable chords)
The control panel has two modes — Play and Edit — shown as a two-tab switch at the top. A short live hint below the tabs tells you exactly what a tap will do next, so you can use chords without reading this page first.
- Play mode (default) — hold one of the 10 chord buttons (or keys 1–9 and 0) to play every saved note at once, release to stop. Hold Sustain to keep the chord ringing after release.
- Edit mode — tap Edit (or press ` ), pick a chord slot to edit it, then tap piano keys to add or remove notes. A badge on each slot shows how many notes it holds; empty slots are dashed. Press Clear N to empty the selected slot, Clear all (or ~ ) to empty every slot.
- Chord slots are numbered 1 through 10, and map to keys 1–9 and 0 in both modes — so “3” on the keyboard always means chord slot 3. In Edit mode those keys select a slot instead of playing it.
- Beginners can ignore chord slots and just play single notes on the keyboard.
Shortcut reference
The tables list the key string reported by the browser (QWERTY). Layouts such as AZERTY will differ.
| Key | Action |
|---|---|
| ' | Toggle computer-keyboard input (works even when ⌨ is OFF). |
| Esc | Reset all held keys and internal key states. |
| Space | Sustain: press to latch on (if off), release to turn off (when on). |
| q | Move the visible keyboard window one octave lower (same idea as the left arrow control). |
| ] | Move the visible keyboard window one octave higher (same as the right arrow control). |
| - | Left-hand zone: base octave down one. |
| _ | Left-hand zone: base octave up one (Shift + hyphen on US QWERTY). |
| = | Right-hand zone: base octave down one. |
| + | Right-hand zone: base octave up one (Shift + = on US QWERTY). |
| b | Left-hand mapping: rotate start note down one semitone. |
| g | Left-hand mapping: rotate start note up one semitone. |
| n | Right-hand mapping: rotate start note down one semitone. |
| h | Right-hand mapping: rotate start note up one semitone. |
| ` | Toggle between Play and Edit mode (same as the two-tab switch at the top of the control panel). |
| ~ | Clear every chord slot (same as the Clear all button). Often Shift + ` on US QWERTY. |
| 1 - 9 | Hold to play chord slot 1 through 9; release to stop. In Edit mode, selects that slot for editing instead of playing. |
| 0 | Hold to play chord slot 10; release to stop. In Edit mode, selects slot 10. |
| Key | Hand | Pitch class (default) |
|---|---|---|
| z | Left | C |
| x | Left | C# |
| c | Left | D |
| v | Left | D# |
| a | Left | E |
| s | Left | F |
| d | Left | F# |
| f | Left | G |
| w | Left | G# |
| e | Left | A |
| r | Left | A# |
| t | Left | B |
| y | Left | C (next octave in row) |
| m | Right | C |
| , | Right | C# |
| . | Right | D |
| / | Right | D# |
| j | Right | E |
| k | Right | F |
| l | Right | F# |
| ; | Right | G |
| u | Right | G# |
| i | Right | A |
| o | Right | A# |
| p | Right | B |
| [ | Right | C (next octave in row) |
Absolute pitch still follows each hand’s base octave (shown next to ⌨) plus the per-key octave step inside the 13-key row. After you change start letters with b/g/n/h, the same physical keys track new pitch classes in chromatic order.
Vocal practice ideas
- Play your first note before an acapella entrance, then sing without looking back.
- Once a week, mark your lowest and highest comfortable pitches on comfortable vowels.
- Alternate short references with singing a cappella to strengthen pitch memory.