> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/exp98-shopify-theme/exp98/sections-and-features/music-player.md).

# 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](/exp98-shopify-theme/exp98/sections-and-features/desktop.md)).

## Adding tracks

Add a **Track** block per song, up to 12.

1. Upload the MP3 in your admin under **Content → Files**.
2. Copy its link with the link button beside the file.
3. Paste it into the track's **Audio file URL**.

| Setting            |                                                                                              |
| ------------------ | -------------------------------------------------------------------------------------------- |
| **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

| Setting                                               | Default |                                                          |
| ----------------------------------------------------- | ------- | -------------------------------------------------------- |
| **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](/exp98-shopify-theme/exp98/sections-and-features/enter-gate.md) 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](/exp98-shopify-theme/exp98/theme-settings/screensaver.md) 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.

{% hint style="info" %}
The mixer needs the track to come from your own store's **Content → Files**. A file linked from elsewhere plays as usual, but the browser won't let the mixer touch it: the faders show greyed, and the visualizer moves on its own.
{% endhint %}