How the music on Lofi Cities is made
The music on Lofi Cities is composed and synthesized live in your browser by a generative engine built on the Web Audio API: code writes the chords, drums, bass and melody as you listen, with no samples, no recordings and no AI model. Each track is a new piece of lofi hip hop, two and a half to four minutes long, and the stream never runs out.
What generative means here
Nothing is pre-recorded. The page picks a random seed, one of about four billion, and a set of rules turns it into a track plan: key, tempo, chords, drum pattern, instrument settings, song form and title. Each track's seed leads to the next, so in practice the music never repeats. There is no trained model and no server doing the work: the instruments are the browser's own oscillators and filters, plus noise generated in code, scheduled on the audio clock ahead of time (0.3 seconds, or 4 seconds in a background tab), so playback stays steady even there.
Chords, keys and song form
Tracks use 24 keys, major and minor, and 13 four-bar chord progressions (seven major, six minor) in jazz harmony: ninths, thirteenths, altered dominants such as 7♭9 and half-diminished chords. The electric piano, an FM synth, plays rootless four-note voicings and picks the one that moves least from the last chord.
Each track has an A and a B progression and one of three song forms, with an intro, A and B sections, a breakdown and an outro. The next track usually starts in a related key, over the tail of the last chord, so tracks flow into each other like a mixtape.
Drums, swing and tempo
The drums are synthesized too: a kick that sweeps a sine wave down to about 50 Hz, a snare of triangle tone and filtered noise, noise hi-hats and a rimshot. There are six grooves (boom, bounce, lazy, half-time, rim and shuffle), with fills at the ends of phrases. At the default Balanced vibe the tempo is 68 to 88 BPM, sixteenth notes swing by 54 to 62% and the snare sits 8 to 18 ms behind the beat. Every hit varies a little in timing and velocity, like a drummer rather than a drum machine.
Bass and melody
The bass is a sine and a quieter triangle wave through a filter that closes after each note: a round pluck that still carries on phone speakers. It follows the kick, lands on the root at each chord change and sometimes walks in with an approach note or slides into a note.
At Balanced, about two thirds of tracks get a lead melody, either a soft sine tone with vibrato or a vibraphone-like FM bell, with a dotted-eighth echo. It uses the key's pentatonic scale and grows from one short motif per track, restated over the chords and turned upside down in the B sections.
The lofi texture
The music runs through a virtual tape machine. A saturation curve rounds off the peaks, a wandering delay adds wow and flutter, and a low-pass filter sets the tone, opening from 900 Hz in the intro and closing at the end (at Balanced, each track starts with about 4 to 10 cents of pitch wobble and a tone setting of 5.5 to 9 kHz, and both drift as it plays). Under it runs a 7.2-second loop of vinyl crackle, four turns of a record at 33⅓ rpm, with clicks, pops, a scratch once per turn and a little hiss. One reverb adds space and a limiter keeps the peaks in check.
The city on screen
Each city adds its own sounds under the music: beds of rain, wind, traffic, water, waves, crickets, birds or voices, and one-off sounds timed to the four-minute scene loop, so thunder rolls just after the lightning. They are synthesized too, but skip the tape machine: the city is the room, the music is the record. Bells, chimes and horns are tuned to the key of the current track, so they stay in the music's key.
City sounds have their own volume slider, and the city sounds mixer (A) sets each sound from 0 to 200% in every city that has it. Track titles come from the city as well, from word banks of 16 places, 20 things and 5 kinds of weather per city: "rain over montmartre", "last train, shinjuku".
The Vibe settings
The Vibe panel (V) has three settings. Style starts with the next track: Jazzhop is the music described above, and four more styles bring their own instruments, chords and grooves. Piano is a felt piano whose left hand plays the bass, over soft brushes, at 58 to 86 BPM. Ambient holds long, warm pad chords over a low drone and a soft sub, with no beat at Chill, at 54 to 74 BPM. Bossa is a nylon guitar, synthesized string by string, playing the bossa nova rhythm over upright bass, cross-stick clave and shaker, at 64 to 96 BPM. Synth is 80s city pop: an analog-style poly synth with chorus, a synth bass and a clap backbeat, at 70 to 100 BPM. Every style keeps the same keys and titles in the Up next list, and plays at about the same loudness.
Energy also starts with the next track: in jazzhop, Chill is 60 to 72 BPM, with more swing, softer drums, a darker tone and more held chords; Upbeat is 80 to 94 BPM, brighter and tighter, with busier piano and a lead on four tracks in five. The Up next list keeps its keys, progressions and titles at every energy. Band changes on the next bar: Full band, No drums (the bass still follows the silent kick pattern) or Chords only, the chord instrument alone and louder so the city sounds don't bury it.
Why it works offline
Because the music is code rather than audio files, there is nothing to stream. Once the site has been opened, a service worker keeps a copy of the pages and scripts, so every city and the music keep working without a connection, in the browser or as an installed app. Phones and tablets use a lighter setting, with a shorter reverb and fewer piano notes at once.