Use the Store for licensed catalog, then jump into AI Studio when the brief needs a custom melody, voice, or alternate take.
Artwork, title, 96-bar waveform, duration, BPM, key, favourite, download. The row is fixed at 56 px and never collapses to a dotted placeholder. Here is why.
A working producer scans a catalog row in under a second. The SONICHAOS track row is engineered for that second: every pixel is load-bearing, nothing is decorative, and the waveform is a real waveform, not a placeholder dotted line.
Every row on /music and on every collection page renders eight slots
in a fixed 56 px height:
2:48.124 BPM, hidden on screens narrower than sm.Am, hidden on screens narrower than sm.The eight slots are fixed in order and width. Producers who scrub the catalog every day rely on positional memory; reordering on hover or on selection breaks that.
The waveform is generated through BBC audiowaveform, the same tool
that powers SoundCloud's peak rendering. The pipeline is:
audiowaveform -i preview.mp3 -o preview.json \
--pixels-per-second 8 --bits 8
We post-process the JSON peaks into 96 buckets, each carrying a min/max pair, then render the bucket as a vertical bar centred on the row's mid line. The bar height maps the absolute peak of the bucket; quiet regions become short bars and loud regions become tall bars. Eight bits of resolution per bar is plenty for a 240 px wide SVG — the eye cannot distinguish more.
Every track's peaks JSON lives next to the preview MP3 in object storage, computed once at ingest. A 30-second preview generates roughly 1.6 KB of peaks. The browser fetches the JSON, hashes it into the SVG once, and reuses the SVG across every place the row appears.
The peaks JSON is fetched lazily on row mount. While it resolves, the row needs something better than empty space. The row mounts a deterministic fallback: an FNV-1a hash of the track ID feeds a seeded PRNG, and the PRNG draws a 96-bar shape that looks plausibly like a real waveform. Same track, same fallback, every render.
The fallback is not a cosmetic placeholder; it is a real bar shape with real heights. The active-row accent applies to it, the hover state applies to it, the keyboard focus ring applies to it. When the real peaks land, the SVG swaps in place with a 120 ms fade, and the hash fallback is gone.
We do not ship a flat dotted line for unloaded rows. A flat line tells the eye the row is empty; a hashed bar shape tells the eye the row is a track. The cost — one tiny PRNG per row — is well worth the perception.
When a row plays, three things change. The artwork picks up a 2 px
brand-accent border. The waveform shifts to the brand-accent fill. The
play-cursor — a vertical 1 px line — moves across the waveform in time
with the audio, driven by requestAnimationFrame. The cursor is the
only animated element on the row; everything else is static.
Hover state is subtler. The row's background shifts by one ramp step toward the accent, the favourite heart fills if the user is signed in, and the waveform brightens by 12% luminance. No vertical translation, no scale transform. A row that jumps on hover loses its place in a long list.
Below the sm breakpoint (640 px), two slots disappear: BPM and key.
The waveform compresses from 240 px to 120 px, which means the bucket
count drops to 48; we re-bin on the client so the same JSON drives both
widths. Duration, favourite, and download stay visible at every width;
they are the actions a phone user needs.
The artwork stays at 56 x 56. A smaller artwork at phone widths makes the catalog read like a list of links rather than a list of tracks.
A 50-row catalog page renders the full set of waveforms in roughly 180 ms over a warm cache, with peaks JSON served from the same edge as the HTML. The first render uses the hash fallback for any rows still in flight; the swap is invisible on a fast connection and a 120 ms fade on a slow one.
Open the catalog and the row is the same row across browse, search, collection, and artist pages.