Music System for YOOtheme Pro

Music System brings two builder elements to YOOtheme Pro that share the same player: a tracklist for audio samples and a Promo Song for a single release. Both play audio files from your own media manager - no embedded player from a third-party service, no script from an external server, no visitor data sent to third parties.

Tracklist with continuous playback

The Audio Sample element shows your tracks as a table: number, cover, title and artist, plus album and duration if you want them. The play button sits on the cover; as soon as a track is playing, an animated equalizer replaces the track number and the duration counts down. The optional toolbar adds Play All and Shuffle - both run through the entire list, and a click on a single row ends the run. You either enter the duration yourself or let the element read it from the audio file. The list appears plain or inside a card, and you set image size, play button and equalizer color in the panel.

Promo Song for a single release

The Promo Song puts a single or an album center stage: cover with play overlay, song title, artist, label and release date, plus two buttons with icons that you can assign freely - for streaming and a shop, for example - and a note field below them. If you like, a blurred copy of the cover fills the background. You choose the overlay style and the position of the play icon; if no cover is set, a regular icon button appears instead so the sample stays playable. All content fields can be bound to dynamic content - place the Promo Song on an article page and it pulls title, cover and links straight from the article.

Accessible to operate

Play and pause use real buttons, are reachable by keyboard and report their state to screen readers. The label names the track instead of saying Play twelve times. The focus ring is built to stay visible on both light and dark artwork, the tracklist has a table caption and column headers, and the equalizer animation switches off when reduced motion is enabled in the operating system. What the element cannot replace: pure audio content also needs a text alternative on the page - the panel points this out in the right place.

Quick guide: build a tracklist

1. Insert the Audio Sample element from the Tonino Gerns group.
2. On the Content tab, add the tracks under Items: audio file, title, artist, and optionally cover, album and duration.
3. Under Settings, choose the table columns and, if needed, turn on the toolbar with Play All and Shuffle.
4. Set the layout to list or card and adjust image size, play button and equalizer color.

Quick guide: build a Promo Song

1. Insert the Promo Song element.
2. Enter cover, song title, artist, label and release date, plus the sample as an audio file.
3. Fill Link A and Link B with target, label and icon - a button without a label is deliberately not rendered.
4. Under Overlay, choose style, position and icon of the play button; the background blur uses the cover automatically.

If something does not appear

• No play button on a track? Then the audio file is missing for that track. The row is still rendered with cover and text.
• The Promo Song does not appear at all? It needs at least a song title, a cover, an audio file or Link A - if it is completely empty, it hides itself.
• The duration stays at --:--? Either the Duration column is turned off, or the browser cannot read the file's metadata, which happens with files from another domain. In that case, enter the duration manually.
• The tracklist's play button only shows on hover - that is intentional, so the list stays calm. On touch devices it is always visible.
• A link button is missing? Without a label it is not rendered. The element deliberately discards targets starting with javascript: or data:.
• Your custom CSS no longer applies? Since 1.0.0, the state class of the playing track is .tg-is-playing instead of .is-playing.