The Instrument card

Make an instrument! Anything that makes music when you play it: a synth, a guitar, a harp, a drum machine… Hardware and software both count.

What counts

It needs to be something you play, so it should react to you as you go. Something that plays a song back for you is cool, but it sounds more like the Demoscene card!

The easiest thing that counts

A web page where your keyboard is a piano. The Web Audio API comes with oscillators built in, so a few lines of JavaScript will get you a beep at any pitch you want:

const ctx = new AudioContext();
const osc = ctx.createOscillator();
osc.frequency.value = 440; // an A!
osc.connect(ctx.destination);
osc.start();

To turn a note number into a frequency, use 440 * 2 ** ((note - 69) / 12). Note 69 is the A above middle C, and each step up is one semitone.

From there, the fun is making it sound like something.

Making it sound nice

• Envelopes! If a note starts and stops instantly, you’ll hear a click. Fade the volume in and out, even over a few milliseconds, and it’ll sound much nicer. Look up ADSR for the classic way to do it.
• Layer oscillators. Two sawtooth waves slightly out of tune with each other already sound like an old synth.
• Filters. A low-pass filter with a cutoff that moves is a huge part of what makes a synth sound like a synth.
• Karplus-Strong is a lovely trick: feed a short burst of noise into a delay line that keeps averaging itself, and out comes a plucked string. It’s a guitar in about twenty lines!
• Drums can be synthesised too. A kick is a sine wave that drops in pitch really fast, and a hi-hat is a tiny burst of noise through a high-pass filter. Put a few of those on a step sequencer and you’ve got a drum machine!

Going further in software

• Web MIDI lets your page listen to a real MIDI keyboard. It works in Chrome and Firefox, but not Safari.
• A plugin (VST3 or CLAP) that runs inside a real music app. JUCE (C++) and nih-plug (Rust) are the usual places to start.
• Weird controls. Play it with your webcam, where your mouse is, how you tilt your phone…

Going further in hardware

• Arduino and a piezo. tone() plays a square wave on a pin. Add some buttons and you’ve got a tiny keyboard!
• A theremin, using an ultrasonic distance sensor (the HC-SR04) or a light sensor. Wave your hand around, get a spooky wobble.
• Touch. An MPR121 board turns anything conductive into a key, fruit included. If you build a banana piano, I need to see it.
• Better sound. The Mozzi library does proper synthesis on an Arduino, and boards like the Teensy (with its audio library) or the Daisy Seed are made for audio.

A Moog Etherwave theremin. The upright antenna controls the pitch and the loop controls the volume, and you never touch either one! Photo by Hutschi, CC BY-SA 3.0, via Wikimedia Commons.

Shipping one

• Demo: for software, a link where we can start playing right away. Tell us which keys do what! For hardware, use your repo link, and put a video of you playing it in the README.
• Screenshot: the interface, or a photo of the real thing.
• README: how to play it and how it makes its sound. Hardware needs a BOM too. A recording of you playing a song on it is always a treat!