Building a Browser Piano That Actually Sounds Good

The Web Audio API shipped in Chrome in 2013. Thirteen years later, most browser-based pianos still sound like they're running through a tin can connected to a dial-up modem. There's a reason for that, and it's not the API's fault. Why browser pianos sound bad The naive approach to a browser piano is to generate a sine wave at the correct frequency. A4 is 440 Hz. Each semitone up multiplies the frequency by 2^(1/12), approximately 1.05946. So you create an oscillator, set its frequency, connect it to the audio context's destination, and you're done. The result sounds nothing like a piano. It sounds like a hearing test. A real piano string doesn't produce a single frequency. It produces a fundamental frequency plus a series of overtones (harmonics) at integer multiples of the fundamental. The second harmonic is twice the fundamental, the third is three times, and so on. The relative amplitudes of these harmonics give each instrument its characteristic timbre. A piano's timbre is further