← Creative
🎹
Web Synth Piano
No audio files, no samples — just math generating actual music in your browser.
🟡 MediumDifficulty
2-3 hoursTime
JavaScript, TypeScriptLanguages
What you're building
You're building a real playable synthesizer — a piano keyboard on screen (with proper black and white keys) that you can click or trigger from your actual computer keyboard, producing genuine synthesized tones via the Web Audio API. Switch between sine, square, sawtooth, and triangle waveforms to hear completely different instrument characters out of the exact same notes. There's not a single audio file involved — every sound is generated live by an oscillator doing math in real time.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- A code editor
- A browser
- Speakers or headphones
🗺️ Build roadmap
01 Set up the AudioContext and play one tone
→
02 Build the visual keyboard
→
03 Wire up click-to-play on each key
→
04 Add proper note release (no more clicks/pops)
→
05 Map computer keyboard keys to notes
→
06 Add a waveform selector
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free