Free virtual piano: play piano online, and make your own

Your own piano that sounds like a real one

You'll describe the piano to a free AI assistant, paste what it writes into a file, and play it. It's built in six stages, but you won't write any code yourself.

• A piano keyboard that opens in any web browser and works offline
• A piano sound made entirely by code, with a soft hammer, ringing strings and a little room reverb
• Three more sounds: electric piano, organ and synth pad
• Mouse, touch with chords and glissando, and your computer keyboard, with a sustain pedal on the space bar
• A "Learn a song" mode where the next key lights up and waits for you
• A Record button, with WAV and MIDI download

Good for: anyone who wants a piano without buying one, children practising a simple tune, music teachers, and anyone who's made a Starter project and wants something bigger.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. The AI tries to do too much, something breaks, and it's hard to tell what. So this guide builds the piano in stages. After each stage, check it works and save a copy (piano-v1.html, piano-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The demo at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. Ask for the keyboard

   Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a virtual piano that runs in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it.
   - No external libraries, no sound files, no internet connection needed. Make every sound with the Web Audio API.
   - An on-screen piano keyboard with two octaves, from middle C (C4) up to C6, with the white and black keys in the right places, like a real piano.
   - Clicking a key plays the note, and the key looks pressed down while I hold it. When I let go, the note fades out quickly, like a real piano when you lift your finger.
   - My computer keyboard plays it too: A W S E D F T G Y H U J K play C up to the next C (W, E, T, Y and U are the black keys). Holding a key down must not repeat the note.
   - For now a simple sound is fine: a triangle wave with a quick start and a gentle fade.
   - A dark background around the keyboard, and keys big enough to press easily.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as piano.html and double-click it. Click a few keys, then try A, S, D, F, G on your keyboard. Then save a copy as piano-v1.html.

   No sound? Browsers only allow sound after you click something on the page, so click a key first. Check your volume, then tell the AI exactly what happens.

2. Make it sound like a real piano

   This is the step that makes people stop and listen. A piano note is lots of quiet tones added together, each fading at its own speed.

   Copy this promptCopy

   That works, thank you. Now please make it sound much more like a real piano. Build each note like this:
   - Add up 8 to 10 sine waves (partials) at whole-number multiples of the note's pitch, each a little sharper the higher it goes, the way real piano strings are (inharmonicity). Use fewer partials for high notes.
   - Give the lowest partials a pair of oscillators less than one cent apart, so they beat gently, like the two or three strings a real piano has for each note.
   - A very fast start, then a natural exponential fade using setTargetAtTime: a quicker drop in the first fraction of a second, then a long quiet tail. Low notes ring for many seconds, high notes for under a second. Higher partials fade faster than the fundamental.
   - A soft hammer knock at the start: a few milliseconds of filtered noise, louder when I play harder.
   - A low-pass filter on each note that starts bright and slowly closes as the note fades.
   - Spread the notes a little in stereo: low notes slightly left, high notes slightly right.
   - A small room reverb with a ConvolverNode, using an impulse response made in code from decaying random noise.
   - A compressor and a soft limiter on the final output, so big chords never crackle or clip. Make low notes about as loud as high ones.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac). Happy with the sound? Save a copy as piano-v2.html.

3. Play it properly: chords, glissando and the sustain pedal

   Copy this promptCopy

   Please make it play properly:
   - Use pointer events so mouse, touch and pen all work. Each finger on a phone plays its own note, so I can play chords.
   - Sliding my finger or the mouse across the keys plays each key I pass over (a glissando). Set touch-action: none on the keyboard and use document.elementFromPoint to find the key under each finger.
   - Show more octaves on bigger screens: 2 on a phone, 3 on a tablet, 4 or 5 on a laptop. Rebuild the keys when the window changes size.
   - Octave − and + buttons under the keys, and the Z and X keys, move the computer keyboard down and up an octave. Also make the number keys 1 to 0, - and = play every note of the octave above, in order (1 is C, 2 is C sharp, and so on).
   - Hold the space bar for a sustain pedal: notes keep ringing after I let go, until I lift Space. Add an on-screen Sustain button for phones. Call preventDefault so Space never scrolls the page.
   - Remember which note each key and finger started, so a note always stops when I let go, even if I change octave in between. If the window loses focus, stop every held note so nothing gets stuck.
   - Ignore all of this when I'm typing in a text box or any other input on the page.
   - Limit how many notes can sound at once (about 40), stopping the oldest first.
   
   Send me the complete updated file.

4. Add more sounds and save your settings

   Copy this promptCopy

   Please add:
   - Three more sounds to choose from with buttons: Electric piano (FM synthesis: a sine wave modulated by another sine at the same pitch, plus a quick bright "tine" ping at 14 times the pitch), Organ (a PeriodicWave with drawbar harmonics, a short key click and a gentle vibrato) and Synth pad (detuned sawtooth waves through a low-pass filter that slowly opens, with a slow fade in and out).
   - A volume slider.
   - A "Labels" choice: note names on the keys (C, D, E and so on), the computer key letters, or nothing.
   - Save my sound, volume, octave and labels in localStorage, so they're the same next time.
   - On phones, start the sound on the first tap by resuming the AudioContext inside the tap, so it works on iPhones.
   
   Send me the complete updated file.

5. Add "Learn a song"

   This turns the piano into a teacher. It's great for a child's first tune.

   Copy this promptCopy

   Please add a "Learn a song" panel under the keyboard:
   - A menu of tunes that are free to use: Twinkle, Twinkle, Little Star; Ode to Joy; Jingle Bells; the opening of Für Elise; and the Canon in D melody. Store each tune as a simple list of notes, like "E4 E4 F4 G4".
   - When I press Start, the next key to play glows. The piano waits until I play it, then moves on. A right note flashes green and a wrong note flashes red.
   - Show a strip of the next few note names with the current one highlighted, and a progress bar.
   - At the end, give a gentle score: how many notes I got right first time, as a percentage, with a kind message.
   
   Send me the complete updated file.

   Want your own tune? Ask: "Please add this song to the menu: C4 D4 E4 C4..." and paste the notes from any beginner's songbook.

6. Record, play back and download

   Copy this promptCopy

   Please add a Record panel:
   - A Record button. Recording starts from my first note and saves when each note starts and stops (after the sustain pedal), how hard I played it and which sound it used. Press it again to stop.
   - A Play button that plays my recording back with the same sounds, lighting up the keys as it goes. Schedule the notes a little ahead with the audio clock so the timing is exact.
   - "Download WAV": render the recording with an OfflineAudioContext using exactly the same sound code, and save it as my-piano.wav.
   - "Download MIDI": save the same notes as a standard MIDI file at 120 BPM, with the right General MIDI instrument for each sound, so I can open it in GarageBand or MuseScore.
   - Make it all fit nicely on a phone screen.
   
   Send me the complete updated file.

   To play your piano on your phone or share it, put it online for free. See Putting your project online for free.

Quick fixes

Sometimes notes get stuck and keep playing. Please store the note each key and finger started (by key code and pointer id), and stop that exact note on keyup, pointerup, pointercancel and lostpointercapture. Ignore repeated keydown events. When the window loses focus or the tab is hidden, stop every held note. Send me the complete fixed file.

Twist it into something else

Once the sound engine works, it can become all sorts of instruments:

Made something you're proud of? Share it and tag us. We feature reader projects.

A real instrument, made from numbers

There are plenty of free pianos online, but building one shows you how sound really works: a note is just a handful of tones fading at different speeds. Once you know that, you can make any instrument you can describe. It's also proof that you can build something genuinely complex by asking for it one stage at a time.

What to build next