Remix Library / Music & Sound

Synth Keys

Play a synthesizer with your keyboard. Pick a waveform and watch the sound wave live.

Beginner HTML · CSS · JavaScript
No account needed: you’ll start as a guest.
read-only · remix to edit
Preview

What you'll learn

  • Web Audio oscillators
  • Frequencies & musical notes
  • Keyboard events
  • Drawing a live waveform
  • Maps & objects

Challenges

Remix it, then try these. Each one is a bit harder than the last.

  1. Change the starting octave, then add a third octave of keys.
  2. Add a volume slider.
  3. Make a "chord" button that plays three notes at once.
  4. Record the notes you play and add a Play Back button.
  5. Add an echo effect (look up DelayNode).