Capstone 7 · Frontend

The Rhythm Machine

Build a drum machine. Sixteen steps, several tracks, and a play head that moves in time. That much is a weekend. The part that makes it worth showing is timing. Naive sequencers schedule each sound with a timer and drift audibly within a minute, because browser timers are not accurate enough for music and get throttled when the tab loses focus. Doing it properly means scheduling ahead against the audio clock rather than the wall clock: a lookahead loop that queues notes slightly in the future, so the audio thread plays them at exactly the right moment. Then make it musically interesting. West African and diasporic rhythm is built on polyrhythm, so allow tracks with different step counts running against each other: a 16 against a 12 produces patterns that take four bars to resolve. Let people hear that. Encode the pattern in the URL so somebody can send a link and the other person hears the same thing.

Concepts used

Web Audio APIScheduling and timingState managementURL encodingKeyboard interactionAccessibilityPerformance

Your dataset

No external data. Synthesise the sounds or include a small set of samples you have the right to use.

Milestones

1Get one sound playing on demand through the Web Audio API.
2Build a sixteen-step grid that toggles, and play it on a loop.
3Replace timer-driven playback with a lookahead scheduler against the audio clock.
4Prove it: run for five minutes against a metronome or a recording and show it has not drifted.
5Add several tracks with independent step counts, so polyrhythms are possible.
6Add tempo, swing, per-track volume, and mute or solo.
7Encode the whole pattern in the URL, and restore from it.
8Make it keyboard playable and usable on a phone, including with the tab in the background.

The graded core

The rest of this project is yours to shape. This one function is the piece everything else depends on, so it runs against hidden tests to prove it is right before you build outward.

◈ Graded Challenge

Polyrhythm, worked out exactly. Write cycle_length(a, b) returning how many steps two tracks of different lengths take to line up again, which is their lowest common multiple. Then the pattern repeats. Both inputs are positive whole numbers.

Name it exactly: cycle_length(a, b)

3 visible + 4 hidden
loading editor…

Your workspace

Build the full project here. Work through the milestones in order, in both languages.

SANKOFA SANDBOX
loading editor…
Your turn → Build it in Python first, then rebuild it in JavaScript. The logic transfers, only the syntax changes.
← All projectsNext: The Sankofa Atlas →