Audio Playlist

The Audio Playlist element plays a set of audio tracks in the page, each with its own cover, title, artist and waveform. Every track is a self-contained player with share, download and copy-link actions; the tracks are laid out in a grid, one column or three.

Adding the element

Add an element in the YOOtheme Pro builder and pick Audio Playlist from the Planckie Elements group. The builder starts you with two placeholder tracks, so the player is visible before you add a file.

Each track is an item with an Audio Source: a local MP3 or WAV from the media manager, or a direct URL to an audio file. A link to a page on a streaming service is not an audio file and will not play.

Content

Option	Description
Tracks	The players.
Display	Seven switches — artist name, track title, cover image, progress display, share, download and copy link — hiding those parts across every track without deleting anything.

Track items

Option	Description
Track Title	The title line.
Artist Name	The line under it.
Audio Source	A local MP3 or WAV file, or a direct URL to an audio resource.
Cover Image	An optional square cover, with its own alt text and focal point.
Share Link	Where the share and copy actions point. Empty uses the address of the current page.
Download Link	What the download action offers. Empty uses the Audio Source.
Style	Overrides the panel style for this track, and HTML Element its tag.

A track renders when it has a title, an artist, an audio source, a cover, a share link or a download link, so a half-filled track still shows up in the builder instead of vanishing.

Settings

Grid and Columns

Grid holds the Column Gap and Row Gap between players, a Divider between columns, and the Center columns and Center rows switches. Columns sets how many players sit side by side at each breakpoint, from Phone Portrait to Large Screens. One column by default, which is the shape a single-track player wants.

Panel

Style covers the card and tile variants of the active theme style, Padding its spacing, and Max Width caps a player. Any track can override the style in its own settings, including None for a track that should stay plain in a set of cards.

Cover Image, Track Title and Artist

Cover Image takes a Width in pixels — the cover is square, so this is both dimensions — and a Border: none, rounded, circle or pill. 200 pixels and rounded by default.

Track Title and Artist each take a text style and a color from the active theme style, and the title also chooses its HTML Element. The title is a div by default and the artist is Text Meta in muted, which keeps a playlist of twenty tracks out of the document outline.

Player

Option	Description
Progress Display	Waveform or a simple Progress Bar, for every track.
Waveform Height	In pixels. 72 by default.
Progress Bar Height	In pixels. 3 by default.
Base Color	The unplayed part of the display. A light grey by default rather than a theme color, because it has to sit behind the played part.
Played Color	A theme color — Primary by default — or Custom.
Hover Color	The part under the pointer. Played Color, the default, uses a lighter shade of it.
Audio Analysis	Generate the real waveform analyses the file in the builder and saves its shape with the track.
Play/Pause Style	The theme button style of the play control.
Play Label / Pause Label / Error Label	Left empty, they read Play, Pause and Audio unavailable.

The waveform is analysed once, in the builder, and the result is stored with the track as a few hundred bytes — the visitor's browser never downloads the file to draw it. Without that data, and with analysis switched off, the element draws a placeholder waveform generated from the track itself: the same track always produces the same shape, but it is not the shape of the audio.

Actions

Option	Description
Action Buttons Style	One theme button style for Share, Download and Copy Link.
Share Tooltip / Download Tooltip / Copy Link Tooltip	Left empty, they read Share, Download and Copy link.

Share uses the sharing dialog of the operating system where the browser has one, and copies the link where it does not. Copy Link always copies.

Accessibility

Option	Description
ARIA Label	Names the playlist for assistive technology. Left empty, it reads Audio playlist.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-track, .pe-cover-image, .pe-audio-play-button, .pe-artist-name, .pe-track-title, .pe-audio-waveform, .pe-audio-progress, .pe-audio-actions

The names follow the labels in the builder, so Cover Image is .pe-cover-image and Track Title is .pe-track-title. The waveform is drawn on a canvas and reads its colors from the settings above rather than from CSS, so recolor it there.

Accessibility and keyboard

The playlist is a labelled list and each track is a list item. The play control is a button that reports its state, and its accessible name is the label you set plus the track title, so a screen reader announces which track is about to play rather than a row of identical Play buttons.

The progress display is a real range input, so seeking works with the keyboard exactly as a slider does: arrows step through the track, Home and End jump to its ends. Its spoken value is the position and the length — 1:23 of 4:56 — in the language of the page.

A track that fails to load disables its own controls and shows the error label in place of the time. The rest of the playlist keeps working.

Notes and limits

• Only one track plays at a time. Starting a second one pauses the first, across every playlist on the page.
• The waveform is analysed in the builder, not in the browser of the visitor. A file the builder cannot read — a remote URL whose server refuses cross-origin reads — keeps the placeholder waveform, and the player still plays it.
• Analysis runs when the Audio Source changes, and changing other fields does not run it again. Save the page after a source change so the stored shape goes with it.
• A streaming service page is not an audio source. Use a direct file address, or upload the file.
• The cover is cropped to a square. Focal Point decides which part survives the crop.
• Share falls back to copying when the browser has no sharing dialog, which is most desktop browsers.