🎮 How to Use
- Click white keys or use keyboard: A S D F G H J K L (white).
- W E T Y U O P (black keys).
- -/+ buttons change octave.
About this tool
Browser piano synthesizer. White keys: C D E F G A B. Black keys: C# D# F# G# A#. Use keyboard A-K for white keys, top row for black. Sound is generated with Web Audio API.
About this browser piano
This is a 15-key virtual piano covering an octave and a third, from middle C (C4 at 261.63 Hz) up to D5 at 587.33 Hz. It is built on the Web Audio API, so no audio samples are downloaded; each note is synthesised on demand from a pure oscillator wave shaped by a short attack-decay envelope. The mapping mirrors a real piano: white keys on your home row (A through L), sharps and flats on the row above (W, E, T, Y, U, O). An octave selector at the top lets you transpose the whole layout up or down so you can practise scales in any key.
Use it to test melodies and chords before committing to a full DAW session, sight-read a piece while a physical instrument is unavailable, train interval recognition, or simply teach a child where middle C lives on the keyboard.
How it works
// Equal temperament: each semitone multiplies frequency by 2^(1/12) freq(note) = 440 Hz * 2^((semitones_from_A4) / 12) // Examples: A4 = 440.00 Hz B4 = 493.88 Hz // 440 * 2^(2/12) C5 = 523.25 Hz // 440 * 2^(3/12) A5 = 880.00 Hz // octave above A4 // Each octave doubles frequency freq(note_at_octave_n) = freq(note_at_octave_n-1) * 2
The Web Audio API creates an OscillatorNode (a pure waveform) at the target frequency, routes it through a GainNode for volume envelope, and connects it to the destination (your speakers). Releasing a key triggers a short exponential gain fade rather than an instant cut, so the note tails off naturally instead of clicking.
Key mapping reference
| Key | Note | Frequency at octave 4 | Type |
|---|---|---|---|
| A | C | 261.63 Hz | White (middle C) |
| W | C sharp | 277.18 Hz | Black |
| S | D | 293.66 Hz | White |
| E | D sharp | 311.13 Hz | Black |
| D | E | 329.63 Hz | White |
| F | F | 349.23 Hz | White |
| T | F sharp | 369.99 Hz | Black |
| G | G | 392.00 Hz | White |
| Y | G sharp | 415.30 Hz | Black |
| H | A | 440.00 Hz | White (reference pitch) |
| U | A sharp | 466.16 Hz | Black |
| J | B | 493.88 Hz | White |
| K | C5 | 523.25 Hz | White (octave up from A) |
Common pitfalls
- iOS Safari silent start. iOS blocks audio until the user explicitly taps. The first tap on the piano unlocks the AudioContext; subsequent key presses work normally.
- Browser tab muted. If you hear nothing, check that the tab is not muted in the browser tab bar and that your system volume is up. Click the tab title to test.
- No sustain pedal. A real piano has three pedals (damper, sostenuto, soft). This browser version has no pedal support, so all notes decay immediately on key release.
- Latency on Bluetooth audio. Bluetooth speakers and headphones add 150 to 300 milliseconds of delay, which makes the piano feel laggy. Use wired audio for accurate timing.
- Expecting a real piano timbre. Pure oscillator waves sound thin compared to a real piano's complex harmonic spectrum. Use this as a pitch reference and basic instrument, not a recording sound.
Related music and sound tools
Frequently asked questions
Which keyboard keys map to which piano notes?
White keys on the home row: A=C, S=D, D=E, F=F, G=G, H=A, J=B, K=C5, L=D5. Black keys on the row above: W=C sharp, E=D sharp, T=F sharp, Y=G sharp, U=A sharp, O=C5 sharp. The layout mirrors a piano keyboard so your fingers fall naturally on the white keys with sharps a row above.
What is the frequency of A4 and why does it matter?
A4 is 440 Hz under the ISO 16 standard (1955). It is the reference pitch most digital pianos, orchestras, and tuning apps use. Some European orchestras tune slightly higher (442 to 444 Hz) for a brighter sound. Historical pitch ranged from 415 Hz (Baroque) to 466 Hz (Renaissance). This piano uses 440 Hz.
How does this browser piano produce sound?
It uses the Web Audio API's oscillator nodes to generate a sine or triangle wave at each note's frequency, shaped by a brief attack-decay envelope so the note rises and fades like a real piano hammer strike. There are no audio samples to download, so the page is lightweight and runs offline once cached. The trade-off is that it sounds more like an electronic keyboard than a real piano.
What is equal temperament and why is each semitone 2^(1/12)?
Equal temperament divides the octave (a 2:1 frequency ratio) into 12 equal semitones, so each semitone multiplies the previous frequency by the twelfth root of 2 (about 1.0595). This was adopted as the Western standard around 1700 because it lets any key sound equally in tune. The trade-off: no interval except the octave is a perfect integer ratio, so chords are slightly out of tune compared to just intonation.
Can I record what I play?
This version is play-only without a built-in recorder. To capture audio, use your operating system's screen recorder (QuickTime on macOS, Voice Recorder on Windows, OBS on any platform). To capture MIDI for editing in a DAW you would need a MIDI-enabled keyboard piano; browser keyboard input cannot generate MIDI.