Virtual Piano — Reference Notes & Vocal Range
Sampled virtual piano in the browser: mouse or touch on keys, optional two-zone computer-keyboard performance with sustain, per-hand octaves, UI scroll, and up to ten chord sets you can edit, save, and fire together. 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.
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.
Sustain
- Hold Space while keyboard mode is ON, or click Sustain, to latch notes until you release Space or turn sustain off again.
Chord sets (10 slots)
- Use ✏️ edit mode (or ` ) to pick a set number, then press piano keys to add or remove them from that set; in edit mode, number keys 1–9 and 0 select which set is being edited instead of playing.
- Hold a set button with the mouse, or hold 1–9 / 0 on the keyboard, to play every note in that set together (release to stop). Key 0 triggers set slot 10.
- 🗑️ or ~ clears all stored sets. Beginners can ignore sets and play single notes only.
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 chord-set edit mode (same as the ✏️ control). |
| ~ | Clear every chord set (same as 🗑️). Often Shift + ` on US QWERTY. |
| 1 - 9 | Hold to play chord set 1 through 9; release to stop. In edit mode, selects that set for editing instead of playing. |
| 0 | Hold to play chord set 10; release to stop. In edit mode, selects set 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.