Skip to content
Toolcroft

Camera, Mic & Media

Virtual Piano Keyboard - Play Piano in the Browser

Play a virtual piano keyboard directly in your browser using your mouse or QWERTY keyboard. No plugins or downloads required. Great for learning notes.

Keys: A W S E D F T G Y H U J K O L P ; - or click/tap the keyboard above.

About the Virtual Piano

This tool uses the Web Audio API to synthesize piano-like tones directly in the browser. No audio files are downloaded - each note is generated by an oscillator node at the correct equal-temperament frequency.

Keyboard layout

The QWERTY mapping follows a standard “piano on keyboard” layout: white keys on the home row and black keys on the row above, starting from C3.

Computer keyNotePiano key
AC3White
WC#3 / D♭3Black
SD3White
ED#3 / E♭3Black
DE3White
FF3White
TF#3 / G♭3Black
GG3White
YG#3 / A♭3Black
HA3White
UA#3 / B♭3Black
JB3White
KC4 (middle C)White

Basic music theory

The C major scale uses only white keys: C D E F G A B C. A major scale follows the pattern of whole and half steps: W W H W W W H (where W = 2 keys, H = 1 key).

Chords are built by stacking thirds (every other note of a scale). A major chord uses the 1st, 3rd, and 5th notes; a minor chord lowers the 3rd by one semitone.

Common chords (C major key)

ChordNotesType
C major (I)C \u2013 E \u2013 GMajor \u2014 bright, stable
D minor (ii)D \u2013 F \u2013 AMinor \u2014 melancholic
E minor (iii)E \u2013 G \u2013 BMinor \u2014 somber
F major (IV)F \u2013 A \u2013 CMajor \u2014 warm
G major (V)G \u2013 B \u2013 DMajor \u2014 tension/dominant
A minor (vi)A \u2013 C \u2013 EMinor \u2014 emotional

The I\u2013V\u2013vi\u2013IV progression (C \u2013 G \u2013 Am \u2013 F) is one of the most popular chord progressions in pop music. Play each chord for one measure to hear it.

Playing in other keys

To transpose a melody to a new key, shift every note by the same number of semitones. To play in G major, start on G and raise the F to F♯ (one black key). To play in F major, start on F and lower the B to B♭ (one black key).

KeySharps/flatsNotes altered
C major0None \u2014 all white keys
G major1♯F\u2192F♯
D major2♯F\u2192F♯, C\u2192C♯
F major1♭B\u2192B♭

Scale modes reference

The seven modes of the major scale define different "starting points" within the same set of notes, producing distinct emotional characters:

  • Ionian (I): the major scale itself. Bright and happy.
  • Dorian (II): minor with a raised 6th. Jazzy, bittersweet.
  • Phrygian (III): minor with a lowered 2nd. Dark, Spanish/flamenco feel.
  • Lydian (IV): major with a raised 4th. Dreamy, floating.
  • Mixolydian (V): major with a lowered 7th. Bluesy, rock feel.
  • Aeolian / Natural Minor (VI): the relative minor. Melancholic.
  • Locrian (VII): diminished. Unstable, rarely used as a tonal center.

Equal temperament

The virtual piano uses equal temperament, where each semitone is exactly a frequency ratio of 12\u221a2 \u2248 1.05946. This means every key is equally in tune relative to every other key, making transposition straightforward. However, equal temperament intervals are slightly out of tune compared to just intonation (where intervals use simple frequency ratios like 3:2 for a perfect fifth). The difference, called the comma, is subtle but audible to trained ears on sustained notes.