← Concordance

NOTICENothing here is for sale, and there isn't even a till: everything here is free, everything is an experiment, and all of it is for fun. Touching the displays is encouraged.

Concordance · how it's made

Music → chimes → montage

This is how it's made.

TWO ROADS ON THIS PAGE

▶ Part one · make a video with the boards

1The music

Two ways in. Bring any song (an mp3, m4a, wav or mp4), or write one for MODEL B-1 · the band: a song there is a sheet, a small text file where one token is one sixteenth note. The band reads the sheet and plays it with voices built from oscillators and noise, so there are no borrowed samples. Then ⤓ WAV renders the whole song, note by note, to a file. No sheet to write? Press ✎ SONG BUILDER: pick a style, a key, the chords and the parts, and the band writes the song for you. To make music right in your browser, open THE RUSTY DOOR from the TOOLS screen on Concordance: the band and the line editor in one music editor, three ways in (compose a whole song, write it in blocks, or as code), kept as code or as a WAV / M4A.

"beat": {
  "kick":  { "inst": "linn kick",   "seq": "x...x...x...x..." },
  "snare": { "inst": "gated snare", "seq": "....x.......x...", "fx": ["reverb"] }
},
"pads": {
  "pad":   { "inst": "PWM pad ♪",   "seq": "Am@3 -*15 | F@3 -*15", "fx": ["pump", "reverb"] }
}

That's a kick on every beat, a snare on two and four, and a pad holding A minor then F, ducking under the kick. The full sheet format is in the kit's READ ME.

2The chimes

A CHIMES board is a 9 × 9 face of small machines, like a puzzle cube: records, cassettes, an EQ, a mirror ball, a sinking sun. Load a song and the board listens first, finds the beats, then plays: on the beats, whole rows and columns slide, and every machine answers the sound in its own way.

✋ The boards are interactive. While it plays, drag a row or a column with your finger (on an iPad or a phone) or the mouse, and it slides like a puzzle cube; the little machines react to being carried. You play along with the song.

A board can be fed two ways. Hearing: it listens to any song's sound, which is what the kit's boards do. A folio: a song written note by note that the board reads, so each tile moves exactly on its note. Folios are new and experimental, and they have their own corner below, the LAB.

The band's sheets aren't folios. To put one of the band's songs on a board, render it to a WAV and let the board hear it.

3The take

Both kinds of board share the same controls. Only the input changes: a board that hears takes a song, and a board that plays a folio takes a folio.

• ♪ LOAD SONGon a board that hears: choose the music, an mp3, m4a, wav or mp4. The board listens through it first and finds the beats.
• ◈ LOAD FOLIOon a board that plays a folio: choose a folio. The board reads its notes, so there's nothing to listen to first.
• ▶ PLAY⏸ PAUSEplay it, watch, and drag rows and columns with a finger or the mouse while it plays.
• ⟳ LOOPLOOPS 1–4folio boards only: a folio is a loop. LOOP plays it round and round (or once), and LOOPS sets how many rounds TAKE records.
• ⏺ RECrecord by hand; press again to stop and save.
• ⏺▶ TAKEthe whole song (or the chosen loops), start to end, recorded for you.

⏺▶ TAKE records the whole song, board and sound together, with half a second of silence at each end, and saves it to your Downloads. ⏺ REC records by hand. Nothing is uploaded, ever. Record the same song on two or three boards: every take comes from the same sound, so they line up exactly in your editor.

4The montage, a choice

This is the part I love. The takes are raw material, and any editor with masks and keyframes will do.

• Layer the boards. Put one board inside another's frame, or a strip of one beside the other. Since they share the song, they move together.
• Mask. A line mask gives you a single row of tiles, a band or a thin seam of light. A shape mask lifts one tile out.
• Screens in screens. Pin a take onto an old TV or a monitor with its four corners. Bow it a little like curved glass, and let the room's light catch on it.
• Loops that close. Drive every effect from one cycle, so its last frame is its first. The loop then has no seam and no jump, however long you use it.
• Cut on the beat. Switching boards on a beat looks like the music did it, because it did.

This montage is my own taste, because I enjoy it, and it's a choice. A chime can be crafted in many ways without any montage: its board, its composition and its frame can be the whole picture, and a take can stand on its own. The rest is up to your taste and your craft. Play around.

⤓The kit

Take only what you want. Each pack runs from its own files in Chrome or Edge on a computer, and comes with a short READ ME. All of it is free, to use and to learn from.

With the full kit, the whole road in five steps:

1. Open MODEL B-1 - the band.html, press ◈ LOAD, choose Insert Coin.band.json, press ▶.
2. Press ⤓ WAV and wait for the render.
3. Open CHIMES/the Arcade - hears any song.html, press ♪ LOAD SONG, and choose that WAV.
4. Press ▶ Play, drag a row or two with a finger or the mouse, then ⏺▶ TAKE.
5. Do the same on Memphis '85, and montage the two takes.

✎ Part two · build your own chime

You don't need any of this to make a video: the boards above are ready to play. This part is for when you'd like a chime of your own: what one is made of, the LAB where folios are being tried, and the prompts to start one with your AI.

⚙Under the hood, file by file

No GIFs, no SVG, no image files, no libraries. Everything you see is drawn by code on an HTML <canvas>, fresh on every frame, and every sound is built by the browser's own audio engine. Nothing is fetched from the internet.

⚗The LAB · chimes and foliosEXPERIMENTAL

A folio is a song written as a grid instead of recorded. Each line is one instrument, and the steps you light are when it plays. It's saved as a small text file, a .music.json. A board that reads a folio doesn't have to listen for the beats, because it already knows every note: each note moves one line of tiles at the moment the board plays it.

What goes in, what comes out

Two kinds of sound

• Sound from a music file. A board that hears plays your song back as it is. It listens first, because it can't know what's inside until it does. Any song works, whoever made it.
• Sound built in the browser. The band, the line editor and the folio board make every sound live with the Web Audio API, from oscillators and noise. Nothing is recorded: the song is only text until something plays it. That's why a whole folio is a few kilobytes, and why the board can know every note before it sounds.

Try it

1. Open LAB (experimental)/THE LINE EDITOR - experimental.html and press ▶ Play. That's Takatum.
2. Change something: light a step, move the tempo, add a line. Give it a name and press ◈ SAVE FOLIO.
3. Open LAB (experimental)/Ink and Paper - plays a folio (Takatum loaded).html, press ◈ LOAD FOLIO, choose your file, and press ▶ Play. Then ⏺▶ TAKE, if you like it.

Where it stands for now: only Ink & Paper reads folios so far. It plays the notes but leaves out the editor's volumes, pans and effects. It knows the editor's first 57 sounds; the 37 band voices at the end of the list play in the editor only, for now.

✎Starter prompts

There's no magic sentence. What works is asking for one small thing at a time, looking at it, and saying what you see. These are good first steps; each is one session.

Then keep going: "the reels should turn the way the tile last moved", "the sun swells on the beat", "no pink". The details are where it becomes yours.