Custom Music Player Shortcode

A WordPress plugin that adds a [music_player] shortcode — a contemporary, multi-album mp3 player with play/pause, next/previous, seeking, per-track download, and an album switcher. Albums and tracks are managed from a dedicated admin settings page, no code editing required.

Features

• Multiple albums — organize tracks into albums; a pill switcher appears automatically whenever there's more than one
• Playback controls — play, pause, next, previous, and a draggable progress scrubber with live elapsed/remaining time
• Download — a download button on the currently playing track
• Admin settings page — add, edit, and remove albums and tracks from a form under Music Player in the WP admin menu
• Multiple players per page — use [music_player] more than once on the same page without conflicts
• Self-contained styling — all CSS is scoped so it won't leak into or be overridden by your theme

Requirements

• WordPress 5.5 or later
• No external dependencies or build step — just PHP, HTML, CSS, and vanilla JS

Installation

1. Download custom-music-player-shortcode.php.
2. Either:
   • Upload as a plugin: zip the file, then in WP Admin go to Plugins → Add New → Upload Plugin, select the zip, and click Install Now.
   • Upload via FTP/File Manager: place the file at wp-content/plugins/custom-music-player/custom-music-player-shortcode.php.
3. Go to Plugins and click Activate next to "Custom Music Player Shortcode."

On activation, the plugin seeds a set of sample albums so the player works immediately. Reactivating the plugin later won't overwrite any albums you've already configured.

Usage

Add the shortcode to any post, page, or widget/block that supports shortcodes:

[music_player]

That's it — the shortcode always renders whatever albums are currently saved in the settings page. There are no shortcode attributes to configure.

Managing albums and tracks

Go to Music Player in the WP admin sidebar.

• Click + Add album to create a new album, then give it a title.
• Within an album, click + Add track and fill in:
  • Title — optional; if left blank, the player derives a title from the mp3 filename in the URL
  • Artist — optional; defaults to "Unknown artist" if left blank
  • MP3 URL — required; a direct link to a playable mp3 file
• Click Remove album or the × next to a track to delete it.
• Click Save albums to persist your changes.

Albums with no title, and tracks with no URL, are automatically dropped when you save — they won't be stored as broken entries.

If you ever remove every album, the shortcode falls back to the sample albums rather than rendering a broken player, and shows a reminder (visible to admins only) to add albums in the settings page.

A note on the download button

The download button uses the HTML download attribute. Whether it forces a file download or opens the mp3 in a new tab depends on your hosting provider — same-origin files (hosted on your own WordPress site) generally download correctly; files on a different domain will only force-download if that server sends the appropriate CORS headers.

Customization

Colors

The player's color palette is defined as CSS custom properties at the top of the plugin's `