Bandfront Player

A professional WordPress audio player plugin for WooCommerce that transforms product pages into interactive music stores with secure preview capabilities and advanced analytics.

🚀 Overview

Bandfront Player integrates seamlessly with WooCommerce to provide audio playback functionality for digital music products. The plugin features context-aware player controls, secure file protection, and analytics tracking.

🎧 Core Player Features

Audio Engine Support

Cross-browser HTML5 audio player with fallback support

• WaveSurfer.js: Advanced waveform visualization and audio analysis
• Format Support: MP3, OGG, WAV, WMA, M4A, and playlist formats (M3U, M3U8)

Context-Aware Rendering

• Shop Pages: Minimal controls optimized for quick previews
• Product Pages: Full-featured player with complete control set
• Dynamic Hook Registration: Prevents rendering conflicts and duplicate players

File Security & Demo Generation

• Secure Streaming: Protects original files from unauthorized access
• Truncated Previews: Configurable demo length (percentage-based)
• FFmpeg Integration: High-quality audio processing for demo creation
• Watermark Support: Audio overlay capabilities for branding

Analytics Integration

• Google Analytics: Universal Analytics and GA4 support
• Playback Tracking: Monitor engagement metrics per product
• Purchase Correlation: Track conversion from preview to purchase

Technical Architecture

Component Structure

bandfront-player/
├── assets/                    # Frontend assets
│   ├── css/                  # Stylesheets + skins
│   └── js/                   # JavaScript files
├── builders/                 # Page builder integrations
│   ├── elementor/
│   └── gutenberg/
├── languages/                # Translations
├── src/                      # Core PHP classes (PSR-4)
│   ├── Admin/               # Admin functionality
│   ├── Audio/               # Audio processing
│   ├── Core/                # Core framework
│   ├── REST/                # REST API
│   ├── Storage/             # Cloud storage
│   ├── UI/                   # User interface
│   ├── Utils/               # Utilities
│   ├── Widgets/             # WordPress widgets
│   └── WooCommerce/         # WooCommerce integration
├── templates/               # Template files
├── test/                    # Testing utilities
├── BandfrontPlayer.php      # Main plugin file
├── README.md                # Documentation
├── composer.json            # Dependencies
└── composer.lock

State Management

The plugin implements a hierarchical settings system:

1. Product-specific overrides (highest priority)
2. Global plugin settings
3. Default fallback values

Modular Extensions

• Audio Engine Module: Engine selection and visualization options
• Cloud Storage Module: External storage integration (Google Drive, planned: S3, Azure)

Installation & Configuration

Requirements

• WordPress 6.0 or higher
• WooCommerce 7.0 or higher
• PHP 7.4 or higher
• Optional: FFmpeg for advanced audio processing

Setup Process

1. Upload plugin files to /wp-content/plugins/bandfront-player/
2. Activate through WordPress admin interface
3. Configure global settings: Admin → Bandfront Player
4. Enable players on individual products as needed

Global Settings

Player Configuration

• Audio engine selection (MediaElement.js/WaveSurfer.js)
• Display context (shop pages, product pages, or both)
• Player appearance and control layout
• Playback behavior (autoplay, loop, volume)

Security Settings

• File truncation enable/disable
• Demo length percentage
• FFmpeg processing options
• Audio watermark configuration

Analytics Setup

• Google Analytics integration
• Measurement ID configuration
• Event tracking preferences

Usage

Shortcode Implementation

// Basic playlist
[bfp-playlist products_ids="*"]

// Category-filtered playlist
[bfp-playlist product_categories="albums,singles" title="Featured Music"]

// Purchased products only
[bfp-playlist purchased_products="1"]

// Custom styling
[bfp-playlist layout="new" player_style="dark" cover="1"]

Product Integration

Players automatically integrate with:

• WooCommerce product loops
• Single product pages
• Grouped and variable products
• Cart and checkout pages (optional)

Page Builder Support

• Gutenberg: Native playlist block
• Elementor: Dedicated playlist widget
• WooCommerce Blocks: Compatible integration

Developer API

Hooks & Filters

// Modify player HTML output
add_filter('bfp_audio_tag', function($html, $product_id, $file_index, $audio_url) {
    return $html;
}, 10, 4);

// Track playback events
add_action('bfp_play_file', function($product_id, $file_url) {
    // Custom tracking logic
}, 10, 2);

// Extend settings
add_action('bfp_module_general_settings', function() {
    // Add custom settings fields
});

State Management

// Access plugin instance
global $BandfrontPlayer;

// Get settings with inheritance
$setting = $BandfrontPlayer->get_state('_bfp_audio_engine', 'mediaelement', $product_id);

// Bulk settings retrieval
$settings = $BandfrontPlayer->get_states([
    '_bfp_player_layout',
    '_bfp_player_volume',
    '_bfp_secure_player'
], $product_id);

Performance Considerations

Optimization Features

• Lazy Loading: Components load only when needed
• Bulk Operations: Efficient database queries
• Cache Integration: Supports major caching plugins
• Resource Management: Conditional script/style loading

Support

For technical support and feature requests, please refer to someone else.