Music Player
A CD player on every page, with a full-screen visualizer and a hidden studio.
A Windows 98 CD player, on every page. Up to 12 tracks, cover art printed on a spinning disc, and — tap the disc — a full-screen visualizer that moves to the music. Maximise the window and there's a mixer hiding in it.
It's the Music section in the theme editor's sidebar. The desktop's Music icon opens it (see Desktop).
Adding tracks
Add a Track block per song, up to 12.
Upload the MP3 in your admin under Content → Files.
Copy its link with the link button beside the file.
Paste it into the track's Audio file URL.
Title
"Untitled" if left empty
Artist
Audio file URL
The link from Content → Files
Cover art
Square. Printed on the disc while the track is selected, and its colours tint the visualizer
MP3 plays in every browser. A 192 kbps or higher file sounds best — the player can't make a low-quality file sound better than it is.
Settings
Enable the Music player
on
Title
Music
The window's title
Window open when the page loads
on
Start playing when opened from its icon
on
Start playing on the shopper's first tap or click
off
See below
Keep playing between pages
on
Remembers the track and where it was
Full-screen studio
on
The visualizer and mixer in the maximised window (below)
Why it can't just play
No browser lets a page make sound until the visitor has touched it. True autoplay isn't possible on any site. Start playing on the shopper's first tap or click is the closest thing: the first tap anywhere — an icon, a window, the desktop — starts the music. Until then, the player's status bar says Tap anywhere to play. With the enter gate on, nothing plays behind it: the music starts when the shopper presses Enter.
Keep playing between pages works the same way. Browsing mostly happens without leaving the page, so the music carries on; after a full reload it picks up where it was on the visitor's next tap.
The visualizer
Tap the disc and the screen gives way to a full-screen visualizer that reacts to the song. If the music is paused, tapping the disc starts it.
Every look is wired to the music: the kick pushes the picture and swells the glow, the hi-hats ripple it, voices shift its colours. It moves through a set of looks — tunnels, kaleidoscopes, VHS tape damage, ASCII art spelled in your store name's letters, your cover art melting into the picture — and every 20 seconds or so it blends into another, landing the change on a beat. Quiet stretches of a song draw the calmer looks, drops the bigger ones. When a track has cover art, its colours set the palette.
While music is playing, the idle screensaver is always the visualizer.
Any tap, click or key closes it — and that tap only closes it; it doesn't open whatever was underneath.
The studio
An easter egg for the shopper who presses the window's maximise button. On a computer the player keeps its size down the left, a mixer appears under it, and the visualizer fills the rest of the window — the same visualizer the disc opens full-screen, with its arrows to step through the looks. On a phone, where no other window has a maximise button, this one does: it opens the same thing stacked under the player, and closes it again.
The mixer, the way Winamp had one:
Equalizer
Winamp's ten bands — 60 Hz to 16 kHz — each ±12 dB, with a preamp and its preset list: Flat, Classical, Club, Dance, Full bass, Full treble, Laptop speakers, Live, Party, Pop, Reggae, Rock, Techno. Move a fader and the preset reads Custom
Tempo
50–150%. By default the pitch follows, like a record sped up; tick Key lock to keep the key. Computers only — a phone can't change a track's speed cleanly once it runs through the mixer, so on touch screens Tempo, Key lock and Brake don't appear
Filter
One knob: left sweeps a low-pass down (the bass stays, the rest goes under water), right sweeps a high-pass up
Echo
A feedback delay, from a touch to a wash
Brake
Hold it: the platter slows to a stop under your hand, and spins back up when you let go
Reset
Everything back to flat
Everything the shopper hears goes through the mixer — including the visualizer, which hears the mix, not the file. The mix is kept for the visit, so it carries on as the shopper moves around the store, and is forgotten when they leave: nobody comes back tomorrow to a store at 150% with the bass off. Close the studio and the picture stops, but the mix stays.
The script behind it is only fetched the first time the studio opens, so nobody else pays for it. Full-screen studio in the section's settings turns it off.
Last updated