// the find
felipefialho/piano
🎹 To play piano using CSS and JavaScript
A two-octave virtual piano you play with mouse, touch, or keyboard, built with Vite, TypeScript, and Howler.js for sampled audio. It's a demo/toy project rather than a library — there's no API to embed it or reuse the piano logic elsewhere, it's just a page.
Actual unit tests on the note/key-mapping logic (src/piano/notes.test.ts, piano.test.ts), which most 'fun' front-end toys skip entirely. Real audio samples (one MP3 per note) rather than oscillator synthesis, so it sounds like a piano instead of a sine wave. PWA with offline precaching of all samples, plus CI, CodeQL scanning, and Dependabot wired up for a project this small — more security hygiene than the scope demands.
Only two octaves and no MIDI input, sustain pedal, or velocity sensitivity, so it's a toy rather than something you'd actually practice on. Sampled audio means every note is a separate network/cache asset instead of one small soundfont or synthesized tone, which is a heavier and less flexible approach to scale past two octaves. No documented way to swap the sample set or theme without forking and editing CSS/source directly — there's no config surface. Keyboard mapping is fixed to QWERTY rows (Z-M, Q-U), with no remapping option and no obvious accessibility story for users who can't use touch/mouse and don't know the hardcoded layout.