HTML5 Audio Player is a powerful, lightweight, and fully responsive audio player plugin for WordPress. It lets you embed MP3 and OGG audio files into posts, pages, widget areas, or template files using shortcodes or the intuitive Gutenberg block—no coding required!
Everything you need to build a professional audio experience on your site:
- Advanced Player Types: Choose from Standard or Sticky Player seamlessly.
- Player Skins: Access sleek and modern Default, Fusion, Stamp, and Wave skins for free.
- Embed Anywhere: Add audio to posts, pages, widgets, and theme templates using native shortcodes.
- Responsive & Lightweight: Adapts instantly to all devices and doesn’t slow down your page load times.
- Customization Options: Adjust player width, border radius, and add custom poster images effortlessly.
- Title & Author Support: Display custom audio titles and author metadata directly on the player.
- Playback Controls: Autoplay, Preload, Mute, and Repeat options out-of-the-box.
- MP3 & OGG Support: Automatically loads the right format based on the user’s device capabilities.
- Google Drive Audio Support: Seamlessly play audio files directly from Google Drive. Our built-in smart proxy bypasses Google's restrictions and CORS errors, ensuring smooth playback and accurate duration display.
Unlock advanced functionality for high-performing podcasts, music sites, and audio courses:
- The Playlist Player: Unlock the fully-featured Playlist Player with dynamic Narrow and Extensive list designs.
- 7 Additional Premium Skins: Access Card 1, Card 2, Simple 1, Simple 2, Player 9, Player 10, and Player 11.
- Color Customization: Set custom primary and background colors to perfectly fit your site’s branding.
- Download Buttons: Allow users to download your audio files with a single click.
- Fast Forward & Rewind: Enhance navigation with customizable seek time settings.
- Start Time Settings: Specify exactly when the audio should start playing upon loading.
- Save State Functionality: Save the player's time state so it resumes precisely from where the user left off.
- Premium Sticky Player Features: Unlock Background Color, Repeat, Save State, Initial Volume, and Download options for Sticky Players.
Easily insert audio players using the native Gutenberg block editor. Configure controls, toggle visibility, and preview your player instantly in the backend.
Works smoothly on Chrome, Firefox, Safari, Edge, IE7–IE9, and fully supports modern iOS and Android mobile devices.
Keep your audio accessible no matter where the user scrolls. The Sticky Player docks beautifully at the bottom of the screen, providing continuous playback across pages.
This project is built with modern web technologies to ensure flawless performance and flexibility:
- Frontend Framework: React (Powers the intuitive Gutenberg Editor blocks and dynamic admin dashboard).
- Core Audio Engine: Plyr.io for a simple, accessible, and customizable HTML5 media player experience.
- Build System:
@wordpress/scripts(Webpack) for block bundling and seamless compilation. - Styling: Modular SASS/SCSS and Tailwind CSS utility classes for consistent, conflict-free UI.
- Backend: PHP with custom WordPress REST API extensions for seamless data handling.
- Licensing & Analytics: Custom BPlugins SDK (based on Freemius Lite) calling through
api.bplugins.com.
HTML5 Audio Player utilizes the following high-quality libraries to deliver a premium experience:
- Plyr (MIT): The core accessible HTML5 media player engine.
- React (MIT): For interactive Gutenberg components and settings dashboards.
- Freemius Lite SDK (Custom): A modified version of the Freemius SDK optimized for the bPlugins API to handle usage tracking and analytics.
/src: Main source code (React, SCSS, Block Metadata)./blocks: React components for the Gutenberg Audio and Radio Player blocks./dashboard: Code for the plugin's React-powered admin dashboard UI./js: Legacy vanilla JS logic for the frontend shortcode rendering (single.js).
/inc: PHP logic, including field configurations, options frameworks, and shortcode handlers./build: Compiled assets (automatically generated via Webpack; do not edit manually).html5-audio-player.php: The main WordPress plugin executable file.
- Clone the repository into your local WordPress
pluginsdirectory. - Clone bpl-tools into the same
pluginsdirectory (required for shared components and dashboard logic). - Install dependencies:
npm install
- Start development watch mode:
npm start
- Create a production build:
npm run build
- Editor: The Gutenberg block (
src/blocks/audioplayer/edit.js) manages block attributes. - Database: Attributes are saved as JSON within the
<!-- wp:h5ap/audioplayer ... -->comment. - Frontend (PHP):
render.phpreads attributes and generates initial HTML + Data Attributes. - Frontend (JS):
view.jsdetects the block, readsdata-attributes, and mounts the React components to initialize Plyr and provide interactivity.
Embed any player configuration quickly using the generated ID:
[h5ap_audio id="123"]
For Radio Player:
[h5ap_radio_player id="1740"]
Developed by bPlugins