Write a chord chart in Nashville numbers, pick a key, and a synthesized arena-rock band plays it back: big room drums, piano chords, bass, and electric guitar fills. Turn the fills up or down while it plays.
Ready
bar 1 of 24
Looping
The chart, key, tempo, dials and mixer here belong to this song. Change anything and it stays with this song. Your own chart is set aside until you go back to it.
Key of G84 bpm
How to write the chart
Verse: 1 5 6m 4
One line per section. The name before the colon is optional. Each number is one bar.
6m · 6- · 2m7
m or - for minor, 7, maj7, sus, sus2, add9, dim, 5 for a power chord.
b7 · b3 · #4
Flat or sharp a scale degree. Borrowed chords like b7 and b6 play major.
1/3 · 4/1
Slash chord: the bass plays the second number.
(4 5)
Split bar: both chords share one bar.
1 5 6m 4 x2
Repeat the line.
%
Repeat the previous bar.
C G Am F
Letter chords aren't read directly, but a button appears that changes them to numbers in your key.
Intro, Verse, Pre, Chorus, Bridge, Solo, Outro
These names set each section's energy when "Follow section names" is on.
How it works
Everything you hear is arithmetic. There are no recordings, samples or plugins: about 1,300 lines of JavaScript in this one page turn a line of numbers into a band, using only what the browser already has. Here is the path a chord takes.
The whole page in one picture. The orange boxes are where sound is born: four players computed from physics. Everything after them is a mixing desk built from the browser's audio parts.
Read the chart
Each line is a section and each number is a bar. The code finds the scale of your key and counts up it. Letters after the number, like m, 7, sus or /3, change which notes get stacked.
In G the scale is G A B C D E F♯. A 6 means its sixth note, E, and the chord built there in this key is minor: Em, the notes E, G and B.
Decide what everyone plays
Before each bar, the arranger looks at the section's energy (set by its name, then shifted by the Energy dial), the Fills dial, and what comes next. Low energy leans toward held piano chords and tight hi-hats; a chorus leans toward an eighth-note piano and a crash wash. The end of a section usually gets a drum fill, a longer one when the next section is bigger. The guitar answers in the gaps, mostly in the 2nd and 4th bar of a phrase, and backs off when the drums fill. When the chord is about to change, the whole band sometimes hits it an eighth note early, together.
The choices are random but repeatable. Each bar rolls its own dice, seeded by the take and the bar's position, so a take plays the same every time, including in the saved file. New take rerolls them all.
Make the sounds
After the page loads, the code computes every drum hit and every note one sample at a time (tens of thousands of numbers per second of sound) and keeps them in memory. The drums are modeled as vibrating heads and bronze plates, the piano as struck strings, and the bass and guitar as plucked strings. The cards below show how.
Run it through a studio
Each instrument gets its own chain, built from the browser's audio parts. The drums go through a short room and a compressor that glues them together. The bass gets a little overdrive. The guitar goes through an amp model and an echo timed to a dotted eighth note. Everything then meets in the mix: a hall reverb, a gentle compressor, a level that rises for the chorus, and a limiter so nothing clips. Reverbs normally use a recording of a real room ringing out; these rooms are computed from decaying noise.
Play it on time
JavaScript timers can fire 10 ms late or more, and you would hear that. The browser's audio clock is exact to the sample. So every 30 ms a timer wakes up and books every note of any bar that starts within the next 0.3 seconds onto the audio clock. That is why a change you make lands at the next bar. Save audio runs the same code on an offline clock that goes as fast as the computer can, then writes a WAV file.
Drums from physics
A string's overtones land on whole-number multiples of its pitch (dashed lines), so it sounds like a note. A drum head's fall between them, so it sounds like a drum.
Each drum is a sum of decaying sine waves at its head's overtone ratios, with the pitch starting a little high and settling, the way a struck head does. The snare adds its wires: filtered noise whose loudness follows the bottom head's motion, so the rattle swells and dies with the drum. The kick and toms have two heads tuned almost alike, so their tone beats slowly as it dies, and how long the stick or beater stays on the head sets how bright the hit is. Each cymbal is 90 to 170 tones scattered between 400 Hz and 17 kHz, with the high ones dying first, plus some noise.
Most drums are also computed at two or three strengths, because a hard hit is not just louder: it is brighter and it cracks. Each strength has two or three slightly different takes, rotated so the same sound never plays twice in a row. That rotation is a big part of why it doesn't sound like a drum machine.
Strings from a loop
Karplus–Strong, a trick from 1983: a short loop that rings like a string.
The guitar and bass fill a short loop with a burst of noise and let it circulate. On each trip, neighboring samples are averaged, so the harsh highs fade quickly and the lows ring on, just like a plucked string. The loop's length sets the pitch.
The bass shapes its starting burst like a string pulled by a pick near the bridge, and listens through a pickup about a fifth of the way up the string. For guitar bends and slides, the code speeds up playback for a moment, and for vibrato it wobbles the speed five times a second. The amp is a curve that rounds off loud peaks: gently for Chime, hard for Overdrive.
The piano
How one chord lands. The roll is small enough to feel, not hear as an arpeggio.
Each piano note is a stack of up to 29 overtones, each a sine wave a little sharper than an exact multiple of the pitch, because real piano strings are stiff, and the low ones ring longer than the high ones. Every note sounds on two strings tuned a hair apart, so it shimmers instead of sounding like an organ.
Loud chords also mix in a short, brighter "hard hammer" layer, so playing harder changes the tone and not only the volume. The right hand's top note lands a few milliseconds before the inner notes, the way a pianist's hand comes down. For voice leading, the right hand picks whichever inversion moves least from the last chord, and the left hand plays the bass note low, doubled in octaves when the energy is up.
The pocket
MIDI puts every note on the dashed line. Real players sit in their own spots and move together.
Adding a random wobble to each note doesn't fix the MIDI feel, because real players drift together. Here the whole band rides one slow drift that wanders from beat to beat. Each player then sits in their own spot: the kick slightly ahead, the snare laid back, the off-beat hi-hats a touch late, and the bass locked just behind the kick. Fills rush a little, the way drummers' fills do.
Where to change things
All of this is in one file. If you ask an AI to change something, these names tell it where to look.
To change
Look for
Which chord symbols are understood
parseQualitybuildChordparseChart
How hard each section name plays
KIND_EenergyOf
Drum beats and where fills go
grooveOptskickOptsplanDrumsdrumFill
Piano rhythms and voicings
PIANO_GRIDpianoOptsvoiceRH
Bass lines
planBass
What the part names mean, and the beat grid under Parts