Audio Player Playlist - Documentation

Overview

Audio Player Playlist is a powerful WordPress block plugin that allows you to create beautiful, customizable audio players with playlist functionality. Perfect for podcasts, music collections, audio books, and more. With built-in statistics tracking, you can monitor your podcast episodes' performance and listener engagement.

Different Ways to Use Audio Player Playlist

Podcasters

Series of episodes
Interview programs
Audiobooks

Musicians/Bands

Albums
Singles
Demos
Covers

Educators

Audio lessons
Online courses
Study materials
Language exercises

Religious Institutions

Sermons
Religious music
Audio studies
Guided meditations

Marketing Professionals

Jingles
Advertising spots
Audio presentations
Voice-over portfolio

Key Features

Multiple theme options (Light, Dark, Custom Colors, Image Background)
Fully responsive design
Customizable playlist layout
Easy drag-and-drop audio file management
Volume controls with memory feature
Progress bar with seek functionality
Shortcode support for flexible placement

Browser Compatibility

Audio Player Playlist works with all modern browsers:

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera

Requirements

WordPress 6.0+
PHP 7.0 or higher
Modern web browser with HTML5 audio support

Installation

Method 1: WordPress Plugin Upload

Go to WordPress Admin > Plugins > Add New
Select "Audio-Player-Playlist.zip" (or similar .zip file) in your computer folder where you downloaded it or some file driver online
Click "Install Now"
Click "Activate" after installation

Method 2: Manual Installation

Download the plugin ZIP file
Unzip the zip file you downloaded in your computer
Copy the "audioplayer-playlist" folder into the WordPress plugins folder
Go to WordPress Admin > Plugins
Click on Activate

Verifying Installation

After installation, you should see:

A new block called "Audio Player Playlist" in the Gutenberg block editor
The plugin listed in your WordPress Admin > Plugins page

After Installation

No additional configuration needed
Ready to use in the block editor
Compatible with all WordPress themes

Usage Guide

Adding the Audio Player

Create or Edit a Post/Page

Open the WordPress block editor (Gutenberg)

Add the Block

Click the '+' button and search for "Audio Player Playlist"

Add Audio Files

Choose an option to add audio:

. File upload (accepts multiple)
. Media Library (accepts multiple)
. By URL (for audio from external sites)

Manage the audios added in the side panels

. Drag and drop
. Allow audio download
. Add new audios
. Edit, Remove...

Using Shortcode

You can also embed the audio player using a shortcode, if you want to use the block in other WordPress page builders editors, such as Elementor, for example.

Note that this shortcode is automatically created when you insert the "Audio Player Playlist" block in the WordPress Gutenberg Editor. So you don't need to worry about finding the post_id or the block_id.

[audioplayer_playlist block_id="your-block-id" post_id="your-post-id"]

Managing Your Playlist

Reorder Tracks

Drag and drop tracks to change their order in the playlist
Edit Track Details

Click on a track to edit its title and other properties
Remove Tracks

Click the remove icon to delete tracks from the playlist

Themes

Audio Player Playlist comes with multiple theme options to match your website's design. Three options are customizable, allowing for many color combinations and image background.

Light Theme

Clean, bright design with excellent readability. Perfect for light backgrounds.

Dark Theme

Modern dark interface ideal for media-rich websites and night mode.

Light Custom Theme

Customizable light theme with color picker options for the audio player elements.

Customizable colors

Color Custom Theme

Customizable light theme with color picker options for the audio player elements.

Customizable colors

Image Background Theme

Background Opacity 0%

Add your own background image with customizable overlay and opacity.

Custom Background Adjustable Opacity Overlay Colors

Image Background Theme

Background Opacity 50%

Add your own background image with customizable overlay and opacity.

Custom Background Adjustable Opacity Overlay Colors

Layouts - with variations

Two layout options to change the structure of the audio player. The default option and a simplified version.

Layout default

Layout play, pause, title

Layout default without playlist

Layout play, pause, title, without playlist

Layout default, with scrollbar

Layout play, pause, title, with scrollbar

Themes - using the theme "Image Background" 100% opaque

You can use theme "Image Background" without using images to make solid colors

Solid color

Settings

Configure your audio player with these powerful settings to create the perfect experience for your visitors.

Audio Player Themes

5 theme options

Light, Dark, Light Custom, Color Custom and Image Background.

Audio Player Tracks

Add and edit audios

Option to add, edit, remove and reorder. There is also an option to download audios.

Audio Player Statistics

Statistics graph

See how many times each track has been listened to.

Audio Player Settings

Playlist settings

Defines whether the playlist is shown and whether the audio player will have a scrollbar or not, configuring its height.

Audio Player Layout

Two layout options

Choose between the standard layout and a more simplified one.

Audio Player Shortcode

Use Audio Player Playlist block in other Page Builder Editors

With the shortcode option, it is possible to create the audio player in the Gutenberg editor and use the shortcode in other WordPress editors, such as Elementor, WPBakery, Divi and others.

Customization

The Audio Player Playlist offers extensive customization options to match your website's design. However, you may want to change some details of the design.

Below we have provided the HTML structure, all the CSS classes available in the Audio Player Playlist to configure any detail that needs to be adjusted.

To make it work on your website, you must add the CSS class corresponding to the item you want to configure. You must insert the CSS in your WordPress Panel: Appearance > Customize > Additional CSS

HTML Structure e CSS Classes


/* Layout default */

<div class="audio__player">
	<audio src="http://your-site/music1.mp3" id="audio-element"></audio>

	<div class="audio__player__elements">
		<div class="audio__player__buttons">
			<button class="buttons prev-button">
				<i class="fa-solid fa-step-backward"></i>
			</button>

			<button class="buttons play-button">
				<i class="fa-solid fa-play"></i>
			</button>

			<button class="buttons next-button">
				<i class="fa-solid fa-step-forward"></i>
			</button>

			<div class="audio__player__volume">
				<button class="volume__down">
					<i class="fa-solid fa-minus"></i>
				</button>

				<button class="volume__icon">
					<i class="fa-solid fa-volume-up"></i>
				</button>

				<button class="volume__up">
					<i class="fa-solid fa-plus"></i>
				</button>
			</div>
		</div> <!-- audio__player__buttons -->

		<div class="audio__player__progress">
			<div class="audio__player__progress__bar">
				<div class="audio__player__progress__fill"></div>
			</div>

			<div class="audio__player__time">
				<span id="current-time">0:00</span><span id="duration">1:30</span>
			</div>
		</div><!-- audio__player__progress -->
	</div><!-- audio__player__elements -->

	<div class="audio__player__playlist">
		<ul class="audio__player__playlist__list">
			<li class="audio__player__playlist__item isActive">
				<span class="track-title">Track 1</span>
			</li>

			<li class="audio__player__playlist__item ">
				<span class="track-title">Track 2</span>
			</li>
		</ul>
	</div><!-- audio__player__playlist -->
</div><!-- audio__player -->



/* Layout Play, Pause, Title */

<div class="audio__player la-ppt">
    <audio src="music1.mp3" id="audio-element"></audio>

    <div class="audio__player__elements la-ppt">
        <div class="audio__player__buttons">
            <button class="buttons prev-button">
                <i class="fa-solid fa-step-backward"></i>
            </button>

            <button class="buttons play-button la-ppt">
                <i class="fa-solid fa-play"></i>
            </button>

            <div class="audio__player__title">
                <span>Track 1</span>
            </div>

            <button class="buttons next-button">
                <i class="fa-solid fa-step-forward"></i>
            </button>

            <div class="audio__player__volume la-ppt">
                <button class="volume__down">
                    <i class="fa-solid fa-minus"></i>
                </button>

                <button class="volume__icon">
                    <i class="fa-solid fa-volume-up"></i>
                </button>

                <button class="volume__up">
                    <i class="fa-solid fa-plus"></i>
                </button>
            </div>
        </div>

        <div class="audio__player__progress">
            <div class="audio__player__progress__bar">
                <div class="audio__player__progress__fill"></div>
            </div>

            <div class="audio__player__time">
                <span id="current-time">0:00</span><span id="duration">1:30</span>
            </div>
        </div>
    </div>

    <div class="audio__player__playlist">
        <ul class="audio__player__playlist__list">
            <li class="audio__player__playlist__item isActive">
                <span class="track-title">Track 1</span>
            </li>

            <li class="audio__player__playlist__item ">
                <span class="track-title">Track 2</span>
            </li>
        </ul>
    </div>
</div>

CSS Class - Customizable Example

Let's say you want to change the properties of progress fill of audio player. You could use the CSS class below ".audio__player__progress__fill". The "!important" directive, without the quotes, says that it will override any previously applied style.

You must insert the CSS in your WordPress Panel: Appearance > Customize > Additional CSS.

* Please note that this customization will only work on the front end and not in the editor.


/*
Note that this CSS will change this item
in all "Audio Player Playlist" blocks.
*/

.audio__player__progress__fill {
  background-color: #ff6b6b !important;
  height: 8px !important;
  border-radius: 4px !important;
  transition: width 0.1s ease-in-out !important;
}

/*
To change a specific block of the "Audio Player Playlist",
you need to add the data-block-id to the selector.
You can find the data-block-id in the "Audio Player Shortcode" panel.
data-block-id and block_id have the same unique values for each block.
Use the value of block_id as the value of data-block-id.
In the example below, just change the data-block-id value to make it work.
*/

[data-block-id="6a02209d-efa5-4ff0-9fe0-a923f8ddf557"] .audio__player__progress__fill {
  background-color: #ff6b6b !important;
  height: 8px !important;
  border-radius: 4px !important;
  transition: width 0.1s ease-in-out !important;
}

Statistics

Track Plays - You don't need to configure anything

Monitor how many times each track or podcast episode has been played. The data is displayed in an easy-to-read graph format.

Statistics are automatically collected and updated in real-time as users interact with your audio player.

Troubleshooting

Common issues and their solutions to help you resolve problems quickly.

Audio Not Playing

Possible Solutions:

Check if the audio file format is supported (.mp3, .wav)
Verify the audio file URL is accessible
Ensure browser permissions allow audio playback

Mobile Display Issues

Possible Solutions:

Update to the latest plugin version
Check theme compatibility

Playlist Not Loading

Possible Solutions:

Verify file permissions
Check server memory limits
Ensure files are properly uploaded

Statistics Not Working

Check these settings:

. Permalinks must not be set to "Plain"
- Go to Settings → Permalinks
  Select any option except "Plain"
. Important questions about cache plugins:
If you use a caching plugin, check if it has an option for something like "Cache REST API". If it has caching enabled, this may cause conflicts with the "Audio Player Playlist" plugin. The conflict happens because the caching plugin stores a static version of your website's pages for faster loading. When the audio player plugin tries to read the statistics data via the REST API, it might be accessing an old version of the page that was stored in the cache by the caching plugin.
Some solutions:
. Disable caching for the "Audio Player Playlist" REST API route in your cache plugin.
. Save the page where the "Audio Player Playlist" block is when you go to view the statistics.
This tells the cache plugin that there is a new version of the page. It will then read the new version of the page and update it, as well as the statistics.
. Verify plugin activation status
. Check WordPress version (6.0+ required)
. Ensure JavaScript is enabled in browser

Deprecation Errors

Troubleshooting Steps:

Update your theme to latest version
Ensure WordPress 6.0 or later is installed
Verify theme follows WordPress coding standards
Test with Twenty Twenty-Five theme to isolate the issue
Contact theme developer if issue persists with updated theme

Overview

Different Ways to Use Audio Player Playlist

Podcasters

Musicians/Bands

Educators

Religious Institutions

Marketing Professionals

Key Features

Browser Compatibility

Requirements

Installation

Method 1: WordPress Plugin Upload

Method 2: Manual Installation

Verifying Installation

After Installation

Usage Guide

Adding the Audio Player

Create or Edit a Post/Page

Add the Block

Add Audio Files

Manage the audios added in the side panels

Using Shortcode

Managing Your Playlist

Reorder Tracks

Edit Track Details

Remove Tracks