First Sounds: Making Music in the Browser

This module is the very first contact with making music the way live coders and electronic producers actually work: not by writing a melody on staff paper, but by layering and mutating small loops in real time. The whole task is a 30-second sketch built in a zero-install browser sandbox (Chrome Music Lab or similar) — the same browser-first posture that tools like Strudel and Hydra assume later, so the habits formed here transfer directly to a live-coding rig.

The arc starts fully supported. Open the sandbox one click away — the point of “a browser music sandbox lets first-contact learners hear a concept before any install” — and simply toggle pre-made loops on and off, discovering by ear that “music is made by mixing and matching small musical ideas.” Next comes ear training in miniature: using the distinction between a singable pitch and mere high/low noise, the learner sorts the sandbox’s sounds into pitched material and percussive noise. Then a guided round of drum programming — sequencing kick, snare, and hats by ear — before scaffolding is removed for the capstone: build the sketch alone and narrate the choices.

Each required atom gates that capstone. Without the relationships-not-isolated-notes framing, the narration collapses into a parts list; without the pitch/noise distinction, the learner can’t deliberately layer a pitched idea over drums; without drum programming and loop combination, there is no sketch at all. The supporting atoms enrich rather than gate: the notation misconception removes gatekeeping anxiety (“I can’t read music, so I can’t do this”), the periodic-vs-aperiodic waveform picture behind tone and noise offers a deeper acoustic explanation for learners who want it, while swing’s jazz origins and the cents unit offer first glimpses of the rhythm and tuning depths later modules explore.

Walkthrough

We’ll make first contact in strudel.cc — a zero-install browser tool, the same browser-first posture the whole path assumes. Type a line, hit Ctrl-Enter (Cmd-Enter) to play, Ctrl-. to stop. That edit → play → stop loop is the entire craft in miniature; everything else is more sounds inside it. Each step is a complete, playable program.

1 — one sound. The smallest possible program: one drum hit, repeating. sound plays a named sample; bd is a kick. Press play — a kick every cycle. Press stop. Press play again. That reflex (start from silence, stop instantly) is the first thing to own.

sound("bd")

2 — a pattern is relationships, not one note. Put four sounds in the string and they share the cycle evenly — the music is in how they sit against each other, not in any one hit ([[music-as-organized-sound-relationships]]). hh is a hat, sd a snare.

sound("bd hh sd hh")

3 — pitch vs. noise. Drums are noise — position in time, no singable note. note() plays a pitch you could hum — here three rising notes through a sine voice ([[pitch-as-singable-quality]]). Play it and try to sing along; you can’t sing a hi-hat, but you can sing this.

note("c4 e4 g4").sound("sine")

4 — combine two loops. The move at the heart of live coding: layer a pitched idea over a drum loop, each on its own $: line so you can edit them independently ([[loop-combination-composition]]).

$: sound("bd hh sd hh")
$: note("c4 e4 g4 e4").sound("sine")

5 — change it over time (the capstone). A sketch evolves. Thicken the hats (hh*2 = two per slot), give the melody some space with ~ (a rest) and air with .room(0.4). Re-evaluating a changed line swaps it live without stopping — narrate each change as you go, and you have the 30-second sketch the capstone asks for:

$: sound("bd hh*2 sd hh")
$: note("c4 e4 g4 ~ e4 c4").sound("sine").room(0.4)

What good sounds like. The pitched line should sit on the drums, not fight them — sparse and singable beats busy and cluttered, especially for 30 seconds. If you can hum the top line while nodding to the kick, the layers are relating, not colliding. The beginner reflex is to add more; resist it — the rests are doing real work. (Skill map: live-coder Domain B — the pitched idea sitting over the groove.)

Now make it yours. Swap sine for sawtooth or triangle and hear the timbre change. Move the melody: c4 e4 g4 → c4 eb4 g4 for a minor feel. Add a third $: line with sound("~ cp ~ cp") for a clap. Slow the whole melody with .slow(2).

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

swing

s("hh*8").swingBy(1/3, 4)

_{strudel-0008 · CC0}

d1 $ swingBy (1/3) 4 $ sound "hh*8"

_{tidal-0008 · CC0}