What does an 88-key piano look like in a browser?
Press the A, S, and D keys on your keyboard, and the corresponding white keys on the screen will light up and play the pitches C4, D4, and E4. The Online Piano Keyboard brings the keys, tones, and chord recognition of a standard piano right into your browser. It synthesizes sound using the Web Audio API, requiring no software installation. The keys support both mouse clicks and physical keyboard mapping. In the default mapping, the A key corresponds to Do (C4), the W key to C-sharp (C#4), and so on. The volume can be adjusted in real-time via a slider. Checking the "Show Note Names" box labels each key with its note name and keyboard shortcut, making it easy for beginners to learn. The tool also features a built-in quick chord lookup—enter a chord name, and the keys automatically highlight and play the arpeggiated chord. Conversely, press multiple keys simultaneously, and the recognition area will display the corresponding chord name. The record button lets you capture your performance at any time and export it as an MP3 audio or MIDI file.
How to Use the Online Piano Keyboard
- Adjust basic settings: After opening the page, drag the volume slider to a comfortable level. Then, check the "Show Note Names" box to display pitch labels and their corresponding computer keyboard keys on the piano keys. If you don't need labels, simply leave it unchecked.
- Play with keyboard or mouse: Click the piano keys directly with your mouse, or press the physical keys according to the keyboard mapping. In the default mapping, the seven white keys from A to J correspond to C4 through B4, while the upper row keys like W, E, T, Y, and U are the black keys. When playing, the pressed keys will highlight and stop sounding when released.
- Quick chord audition: Enter a chord name, such as
Cmaj7, into the "Chord Lookup" input box, and click the adjacent "Play" button. The tool will immediately highlight the C, E, G, and B keys and play them in sequence. You can also click the common chord buttons (like C, Dm, G7) below the input box to instantly fill in the chord name. - Reverse chord recognition: Press the C, E, and G keys simultaneously using your mouse or keyboard, and the recognition area will display "C Major Triad". The more keys you press, the richer the recognized chord types. The recognition result clears automatically when you release the keys.
- Record and export: Click the "Record" button to start playing. When finished, click "Stop" to listen to your performance. Once satisfied, select "Export MP3" to save it as an audio file, or "Export MIDI" to save the note data for further editing in notation or sequencing software.
Practical Example: Playing the First Line of "Twinkle, Twinkle, Little Star"
Here is how to play the first four measures of "Twinkle, Twinkle, Little Star" using the default physical keyboard mapping. Please ensure your keyboard input method is switched to English before playing:
- Key A (C4) → Key A again (C4) → Key G (G3) → Key G again (G3) → Key H (A3) → Key H again (A3) → Key G (G3)
The corresponding notes are Do Do Sol Sol La La Sol. As you play, the on-screen keys will highlight in sync, and you can adjust the volume slider at any time. If you want to reinforce your memory, check "Show Note Names" to see the note names and shortcut hints on the keys while playing. Through this simple melody, you can quickly experience the rhythm and responsiveness of the keyboard mapping.
Typical Use Cases
- Musical initiation and sight-reading: Students or beginners can open the page and follow the highlighted prompts in built-in tutorials (like the "Ode to Joy" snippet), pressing the corresponding keyboard keys to gradually familiarize themselves with note positions and rhythm, practicing without needing a physical piano.
- Music theory and chord learning: Want to know which notes make up a Cmaj7? Simply enter it in the "Chord Lookup" and play it; the highlighted keys make it clear at a glance. Then, try clicking C, E, G, and B with your mouse to test the reverse recognition and consolidate your memory.
- Capturing inspiration and simple arranging: Content creators or music enthusiasts can casually play a melody, record it, and export it as a MIDI file. By importing it into notation software (like MuseScore) on a phone or computer, they can generate formal sheet music for further refinement.
Notes and Limitations
- Keyboard mapping may fail when a non-English input method (like Chinese IME) is active. Please ensure you switch to English input mode before playing, otherwise, keystrokes will be intercepted by the IME.
- Chord recognition currently focuses on common triads, seventh chords, and suspended chords. Complex jazz chords or chords with omitted notes may not be recognized, or the highlighted keys may be incomplete.
- When pressing multiple black keys simultaneously on a mobile touchscreen, there may be delays or missed recognitions due to touch sampling limitations. For the best experience, we recommend using a mouse or physical keyboard on a computer.
- Recording and exporting are done locally in the browser, and no audio data is uploaded. However, low-end devices may experience brief stuttering when recording large files or performing heavy calculations simultaneously.
- The tone of this virtual piano is simulated via a synthesizer. It differs from the resonance and velocity feedback of a real piano and cannot completely replace a physical instrument. It is better suited for practice, capturing inspiration, and teaching assistance.
Frequently Asked Questions (FAQ)
- Which key on the computer keyboard corresponds to Do?
By default, the A key corresponds to Middle C (C4), which is Do. The S key is Re (D4), D is Mi (E4), F is Fa (F4), G is Sol (G4), H is La (A4), and J is Si (B4). The black keys are controlled by W, E, T, Y, U, etc. You can check "Show Note Names" to use the keyboard map as a reference. - Which chords can the chord lookup recognize?
It supports common major triads (e.g., C), minor triads (e.g., Dm), seventh chords (e.g., C7, Cmaj7), and some suspended chords (e.g., Csus4). Certain complex augmented sixth chords or extended chords may not be recognized correctly; in such cases, the reverse recognition feature will display an approximate result or no result. - What are the exported MIDI and MP3 files used for?
MIDI files only record the pitch, duration, and velocity of notes. They are small in size and can be imported into software like Cubase, FL Studio, or MuseScore for further editing and changing instruments. MP3 is a directly rendered audio file, perfect for quickly sharing with others to listen to, but the note content cannot be modified. - Can I play chords on a mobile device?
Yes, but due to the limitations of multi-touch on touchscreens, pressing more than three keys simultaneously may sometimes cause delays or missed notes. If you need to use chord recognition frequently, we recommend operating on a computer. - Does this tool require an internet connection?
After the page initially loads, the core functions (key clicks, chord lookup, recording) run locally in your browser, so you don't need a continuous internet connection while playing. However, if your browser blocks scripts or audio, you will need to allow them before it can produce sound.
Now you can try it out for yourself on the online piano keyboard above—just hit a few keys, or enter your first chord name and take a listen.
