Free Online Piano Keyboard

Play piano in your browser with a full virtual keyboard. Choose from multiple octaves, sound types, scales, and chords. Use your mouse, touchscreen, or computer keyboard. Nothing to install.

12 min read

How This Piano Compares

This virtual piano offers more interactive features than most online alternatives. The combination of multiple sound engines, scale visualization, chord highlighting, and recording puts it ahead of tools that only provide basic key playback.

Learn Piano Online

This tutorial covers the fundamentals of playing piano, from hand position to reading notes. Pair it with the virtual keyboard above to practice along without needing a physical instrument.

Complete Guide to the Online Piano Keyboard

Playing piano has traditionally required access to an expensive physical instrument. An acoustic upright or grand piano can cost thousands of dollars, and even a decent digital keyboard runs several hundred. This free online piano keyboard removes that barrier entirely. It runs in any modern browser using the Web Audio API, which means there is nothing to download, nothing to install, and no plugins required. You get a functional musical instrument that works on desktops, laptops, tablets, and phones.

The virtual keyboard displays a realistic layout of white and black keys. White keys represent the natural notes (C, D, E, F, G, A, B), and black keys represent sharps and flats (C#/Db, D#/Eb, F#/Gb, G#/Ab, A#/Bb). The default view shows two octaves starting from C4 (middle C), which is enough for playing melodies and simple chord progressions. If you need more range, expand to three or four octaves using the controls. You can also shift the starting octave anywhere from C2 (deep bass) to C6 (high treble).

Sound Generation

Each note is generated in real time using the Web Audio API's OscillatorNode. The piano sound uses a sine wave with a shaped amplitude envelope that mimics the attack and decay of a real piano string. The organ sound uses a square wave for that classic sustained tone. The synth sound uses a sawtooth wave, which has a bright, cutting quality popular in electronic music. All three sound types respond to the volume control and sustain toggle.

The sustain feature changes how notes behave after you release a key. Without sustain, notes stop quickly. With sustain enabled, notes continue to ring with a gradual decay, similar to holding down the sustain pedal on a real piano. This is useful when you want notes to blend together or when practicing slow chord progressions.

Computer Keyboard Mapping

You do not need a mouse to play. The computer keyboard is mapped to the piano keys for faster performance. The home row keys A, S, D, F, G, H, J, K, and L correspond to white keys from C through the next C. The upper row keys W, E, T, Y, U, O, and P correspond to the black keys. This mapping follows the physical layout of a computer keyboard, with black keys appearing between the same white keys as they do on a piano. Hold shift to access the upper octave in the mapping.

Scale Highlighter

Learning scales is fundamental to music theory and improvisation. The scale highlighter lets you select any root note and scale type, then visually marks every key that belongs to that scale. The major scale follows the whole-whole-half-whole-whole-whole-half pattern. The natural minor scale follows whole-half-whole-whole-half-whole-whole. The pentatonic scale removes the fourth and seventh degrees for a five-note pattern that sounds good over almost any chord progression. The blues scale adds a flatted fifth to the minor pentatonic for that characteristic bluesy sound.

When a scale is selected, highlighted keys get a colored indicator at the bottom. This lets you see the pattern at a glance and practice playing within the scale. Try selecting C Major, then play only the highlighted keys. You will hear that familiar "do re mi" sound. Switch to A Minor to hear the relative minor. Try the blues scale to get into improvisation territory.

Chord Display

The chord section shows common chord types. Click any chord button to see which keys make up that chord highlighted on the piano. This is a learning tool that helps you understand chord construction. A major chord uses the root, major third, and perfect fifth. A minor chord flattens the third. A seventh chord adds the minor seventh on top of a major triad. Understanding these patterns is the foundation of harmony and songwriting.

Recording and Playback

The recording feature captures every note you play along with its timing. Click Record to start, play your melody or chord progression, then click Stop. The recording stores the note names and the time intervals between them. Click Play Recording to hear your performance played back exactly as you performed it. This is useful for checking your timing, practicing phrases, or just having fun layering ideas.

Recordings are stored in memory during your session. They use the same sound settings that were active during playback, so you can switch sounds between recording and playback to hear how a melody sounds on different instruments.

Web Audio API Technical Details

The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. It provides a powerful and versatile system for controlling audio on the web. The API uses an audio routing graph where AudioNode objects are connected together to define the overall audio rendering. The actual processing happens in the underlying implementation (typically optimized C/C++ code), making it efficient enough for real-time musical applications.

Each note in this piano creates an OscillatorNode connected to a GainNode for volume envelope shaping. The oscillator frequency is calculated from the note using the formula: frequency = 440 * 2^((noteNumber - 69) / 12), where noteNumber is the MIDI note number (A4 = 69). This equal temperament tuning ensures all intervals are consistent across the keyboard.

Tips for Beginners

Start with the C Major scale. Place your right thumb on middle C (C4) and play up the white keys: C, D, E, F, G, A, B, C. Practice going up and down until the movement feels natural. Next, try simple melodies you already know. "Twinkle Twinkle Little Star" uses only the notes C, D, E, F, G, and A, making it perfect for beginners.

Once you can play the major scale smoothly, try learning the chord progression C - F - G - C. These are the I, IV, and V chords in the key of C Major. This progression appears in countless songs across every genre. Use the chord display to see which notes make up each chord, then practice switching between them.

The scale highlighter is your friend when improvising. Select C Major Pentatonic and play only the highlighted keys in any order. Almost everything you play will sound musical. This is because the pentatonic scale removes the notes that create the most tension, leaving you with a set of notes that all sound good together.

Practice Strategies

Use the recording feature to track your progress. Record yourself playing a scale or melody once a week. Listen back to earlier recordings to hear how much you have improved. This kind of self-assessment is valuable because it gives you concrete evidence of your development.

Practice in short, focused sessions. Ten minutes of concentrated practice is worth more than an hour of unfocused noodling. Pick one thing to work on each session: a scale, a chord progression, a melody, or a rhythm pattern. Repeat it slowly until it is clean, then gradually increase speed.

Combine the piano with the metronome tool for timing practice. A solid sense of rhythm is just as important as knowing which notes to play. Start at a slow tempo and play each note exactly on the beat. Only speed up when you can play perfectly at the current tempo.

Related Stack Overflow Discussions

Hacker News Discussions

Browser Compatibility

Data from caniuse.com/audio-api

Related Tools

Frequently Asked Questions