This widget implement an 88-key virtual piano that runs in a web browser and that cover a full range of music from A0 to C8. You can play this 88-key virtual piano with either a mouse or the computer keyboard. Clicking on the piano keys with a mouse will make the piano play the key’s note, and you will release the note when you release the mouse button. Pressing piano keys on the computer keyboard will play the note, and will hold the note as long as you press the key.
The computer keyboard keys is arranged in four rows to allow for playing different octaves of piano notes. The Z keys on the computer keyboard control the notes in the lower octaves (near octave 2), the A keys control notes in octave 3 and octave 4, the number keys control notes in octaves 4 and 5, and the Q keys control notes in octaves 6 and 7. Small indicators shows which keys on the computer keyboard control which piano keys.
How to Use the 88-Key Virtual Piano
To play the sharp or black piano keys on the piano, hold the Shift key on the computer keyboard while pressing the white keys that control the notes one octave lower. For instance, holding the Shift key and pressing the Z key will play the C#2 note, and holding the Shift key and pressing the A key will play the C#3 note. However, there are no sharp notes for the E or B piano keys, so holding the Shift key while pressing the E or B keys will play the same note on the piano.
The slider to the right of the piano can control the volume of the piano. Moving the slider down will lower the volume of the piano for quieter environments, and moving the slider up will increase the volume of the piano. The tone selector to the right of the piano can control the tone of the piano.
The piano makes use of a triangle wave core for its “Piano” tone, creating piano sounds with a soft decay; it uses a series of harmonics for the “Organ” tone to create a sustained sound; the “Synth” tone uses a sawtooth wave to create a brighter sound. The tone will take effect on the next note played on the piano. The sustain checkbox will hold the played notes on the piano after you release the keys.
This checkbox acts like a pedal on a physical grand piano; it is useful if you want to play slow melodies with notes that blend into one another. However, you should uncheck it if the piano needs to remain crisp and with each note separated from the others. The transpose function will shift the piano keys on the computer keyboard up or down the 88-key piano range.
Clicking the plus-12 or minus-12 buttons will transpose the keyboard mapping up or down one octave, respectively. Clicking the plus-1 or the minus-1 buttons will transpose the keyboard up or down one semitone, respectively. The transpose function is useful in playing melodies that are either too high or too low for the default keyboard arrangement.
The reset button will reset the keyboard mapping to its original position. The fullscreen button will expand the 88-key virtual piano to fill the screen. This is useful for those with larger screens so that the piano keys are larger and more easy to hit.
The “How to play” button will open a panel that displays a diagram of the piano and keyboard keys, as well as the sharp keys. Some ways to practice playing the piano include pressing the A, D and G keys at the same time to hear a C major chord; turning on the sustain checkbox and playing an ascending run of piano notes to hear the sustained piano notes; or using the transpose function to transpose the piano keys so that its melody becomes easier to play if it is otherwise a difficult song. The audio engine is started when you first interact with the 88-key virtual piano widget, but the piano will not be ready to play until the audio engine has started.