Audio Player Block is a lightweight, high-performance, and fully responsive Gutenberg block and shortcode plugin for WordPress. It allows your website visitors to listen to music and customize audio players seamlessly in your posts or pages.
Everything you need to add a beautiful audio player to your website:
- Multiple Audio Management: Easily add or remove multiple audio tracks from the player with full control over your playlist.
- Track Details Input: Configure a custom title and artist name for each audio track to keep your content well organized.
- Cover Image & Audio File Upload: Upload audio files along with a cover image to create a more engaging and visually appealing player.
- Player Customization: Adjust the player’s width, height, and style with custom colors, backgrounds, hover effects, and other design settings.
- Smart Audio Play/Pause Control: Play one audio track at a time while automatically pausing other active players on the same page.
- Universal Shortcode API: Embed audio players anywhere on your site using simple shortcodes.
Unlock advanced styling and layout control:
- Customize 6 Different Themes: Toggle between 6 beautiful built-in player layouts/themes (Default, Slider, OneHaash, Wooden, Card, and Lite).
- Auto Play & Loop Modes: Automatically start the next track on track completion, or loop the current track continuously.
- Advanced Navigation & Playback Controls: Enable or disable prev/next navigation, a custom stop button, forward/backward buttons, and playback speed adjustment options.
- Time Display & Seek Slider: Show/hide current and total playback time, and style the seek range slider (height, radius, thumb width, colors, outline, shadow).
- Download Option: Allow visitors to download audio files directly from the player.
- Waveform Customization: Customize the base and light colors of the audio waveform.
- Playlist Customization: Style the playlist layout with custom padding, borders, radius, and active item colors.
The plugin registers a modern Gutenberg block:
| Block Title | Block Name (Slug) | Description |
|---|---|---|
| Audio Player | bpmp/mp3-player |
Adds a customizable audio player block with playlist and theme controls. |
To separate configurations cleanly, the plugin registers a custom post type:
audio_player_block(Audio Player): Manages saved block configurations and audio files, allowing them to be loaded anywhere via shortcodes.
Embed any saved Audio Player configuration anywhere on your site:
[audio_player id="123"]Code Reference: Defined in Shortcode.php.
- HTML5 Audio API: Renders high-fidelity audio controls and waveform structures.
- Frontend JS/React: React is used to drive the custom Gutenberg block interfaces, custom sidebars, and admin dashboard fields.
- Build System: Gulp handles packaging and ZIP compilation, while Webpack via
@wordpress/scriptshandles block transpilation and code splitting. - bpl-tools (Shared Utility): A shared utility library providing admin dashboard components and common Gutenberg editor controls.
- Source/GitHub: bPlugins/bpl-tools
- License: GPL-2.0-or-later
- External Services: Connects to bPlugins and Freemius services for product data and checkout functionality.
/src: Active React components, SCSS styling, and Webpack entry files./Components: Gutenberg block edit templates, player layout components, settings panels, and controls./bplugins-admin: React components and layouts for the backend plugin settings page./utils: Common helper functions and icons.
/includes: Core PHP controllers, namespace loaders, and class managers.- core.php: Main plugin bootstrapper and loader.
- Init.php: Registers block types and custom post types.
- AdminMenu.php: Creates submenu page for Help & Demos and renders the settings dashboard wrapper.
- Enqueue.php: Enqueues editor blocks scripts, styling, and dashboard assets.
- ShortCode.php: Handles shortcode rendering.
- CustomColumn.php: Appends a quick copy-to-clipboard shortcode column in the Audio Player CPT admin table.
- RestAPI.php: Processes backend AJAX settings requests securely.
/build: Compiled and bundled files (automatically generated via Webpack).plugin.php: The main executable and plugin bootstrapper.
- Install development dependencies:
npm install
- Start development hot-rebuild mode:
npm start
- Compile minified assets for release:
npm run build
- Package plugin into a clean distribution ZIP file:
npm run make-zip
- Editor Side: Block configurations are configured via React panels in
/src/Componentsand stored as serialized block attribute comments in the post content database. - PHP Frontend Rendering: When a shortcode or block renders, the server parses the attributes and outputs a DOM container with a
data-attributesJSON string. - JS Initialization: On DOMContentLoaded, the frontend script view.js parses
data-attributes, mounts the React component, and renders the player using the corresponding theme layout (Default, Slider, OneHaash, Wooden, Card, or Lite) within the container.
Developed with ❤️ by bPlugins