Music Magic

Music Magic writes the currently playing track into text and image layers on elements you have already designed. It is a data source, not a separate graphic. A text layer's Trigger setting and an image layer's Music setting define the bindings. The editor displays your sample text and uploaded image until a track is playing.

Music Magic requires Premium. The Music Magic page displays setup information until Premium is active and a source is connected.

Open Music Magic from the Music Magic link in the Projects header.

Sources

The Source menu selects either Browser tab or Spotify account. Only the selected source updates overlays. The sources are not merged; if a track is playing in a browser tab and a different track is playing in the Spotify app, only the selected source's track is used.

Two sources are provided because a web page cannot read the operating system's media session directly.

Browser tab

Use this source when audio is playing in a browser tab, such as a web player or a stream, and the browser exposes it as a media session.

1. Set Source to Browser tab.
2. Install the Streamliner browser extension in Chrome, Edge, Brave, or Arc. Load it as an unpacked extension from the extension folder.
3. Select Pairing code and paste the code into the extension.
4. The page displays Extension connected when pairing is complete.

The extension reads the title, artist, album, and artwork from the tab that is currently playing audio. It cannot detect the Spotify desktop app or other native players. For those, use the Spotify account source.

Spotify account

Use this source for the Spotify desktop app, or when you want transport controls.

1. Set Source to Spotify account.
2. Create an app in the Spotify developer dashboard.
3. Add the redirect URI displayed on the Music Magic page to the app. Use Copy to copy the exact value, including the https:// scheme and the /api/spotify/callback path. Spotify requires an exact match.
4. Enter the app's Client ID and client secret, then select Save credentials. The secret field is cleared after a successful save and does not need to be re-entered to reconnect.
5. Select Sign in with Spotify. The page displays the connected account name and whether Spotify reports it as Premium or Free.

A Spotify app in development mode can authorize the accounts registered on that app, including the desktop app signed in to the same account.

The Now playing section polls the active device. Previous, Play / Pause, and Next control the Spotify player. The device menu transfers playback to a different device. If the menu is empty, open Spotify on a device so one is available.

Transport controls require Spotify Premium. Now-playing updates work with a free Spotify account, and the page notes this when the connected account is not Premium.

Pin saves a track or playlist to your account for one-click playback. Search finds songs and playlists. Selecting Play on a pinned item sends it to the selected device.

Bind layers to the track

On the element:

1. On a text layer, set Trigger to Track name, Artist, or Album. The text field serves as the sample and placeholder.
2. On an image layer, set Music to Album art. While a track is playing, the album art replaces the image. When nothing is playing, the uploaded image is displayed, so choose an image that is appropriate to show between tracks.
3. Optionally, add a reaction with When set to Track changes and Then set to Play this element. One shot plays the entrance animation on each new track. Loop keeps the element playing after the first change. Omit the reaction if the graphic should remain on screen and only update its text and art.

Publish the element as a browser source. After adding or changing a binding, select Update source. The binding is stored in the composition; the track data is not. Once published, track changes are delivered to the existing URL without further updates.

All bound overlays follow the single selected source. Two elements on separate browser sources display the same track; they cannot follow different players.

Troubleshooting

If a layer does not display the current track, check the following:

1. A source is connected, and the Music Magic page displays the current track title.
2. The text layer's trigger matches the intended field. A layer set to Artist does not display the track title.
3. The browser source was updated after the trigger was set.
4. The browser source is visible in OBS. A source that has been shut down does not render, even though the document continues to update.

The editor preview reflects the current now-playing record when one is available. Otherwise, the sample text is shown.