Modern Audio Player - Documentation

Selecting a Preset

In the Presets section of the Content Tab:

1. Browse the dropdown list (presets are alphabetically sorted)
2. Use the search box to filter presets by keyword
3. Each preset shows three colored dots indicating its color scheme
4. Click to apply - changes appear instantly in live preview

Preset Dropdown - Search and Color Indicators

Preset Example - Style 1

Preset Example - Style 2

Preset Example - Style 3

Preset Example - Style 4

Built-In Presets

The plugin includes hand-crafted presets covering various music genres and design styles. Built-in presets are marked with a "BUILT-IN" badge and cannot be deleted.

Creating Custom Presets

1. Select an existing preset as starting point
2. Customize using Style Tab controls (see Style Tab Customization section)
3. In the "Save as Custom Preset" panel, enter preset name
4. Enter author name
5. Click "Save Preset"
6. Refresh editor page to see the new preset in the list

Exporting Presets

1. Select the preset you want to export
2. Go to "Manage Presets" section
3. Click "Export Selected"
4. A JSON file downloads to your computer

Manage Presets - Export Interface

What gets exported:

• All design settings (colors, fonts, shadows, borders, effects)
• Preset name and author information
• Background image URLs (if present)

Importing Presets

1. Go to "Manage Presets" section
2. Drag and drop JSON file onto import area, or click "Browse" to select file
3. Click "Import Preset"
4. Refresh editor page to see imported preset in the list

During import:

• JSON file is validated
• All settings are loaded
• Background images are automatically downloaded from URLs
• Images are uploaded to your Media Library

Deleting Custom Presets

1. Select the custom preset
2. Go to "Manage Presets"
3. Click "Delete Selected"
4. Confirm deletion

Style Tab Customization Overview

After selecting a preset, you can customize every visual element using the Style Tab. The Style Tab contains 7 dedicated sections providing precise control over all player components.

See the Style Tab Customization section below for complete details on all available controls.

Album Title

Enter the album or playlist title. This appears at the top of the player.

Album Cover Image

Upload the main album cover image. This image:

• Displays in the player header
• Is clickable - opens in full-screen modal popup when clicked
• Is separate from track cover images

Album Cover - Full-Screen Modal View

Adding Tracks

1. Click "Add Track" button
2. Upload audio file (MP3 or WAV)
3. Track title auto-fills from filename with smart cleanup
4. Optionally enter artist name
5. Optionally upload track cover image
6. Repeat for additional tracks

Add Track - Auto-Fill Title Functionality

Track Cover Images

Track cover images are optional individual images for each track. When a track plays:

• Its cover image displays automatically with the selected animation
• The image appears in a dedicated animated space
• If no track cover is provided, no cover displays during that track

Track Cover - Displayed with Animation During Playback

Auto-Fill Track Titles

The plugin automatically extracts clean titles from filenames:

• 01-intro-song.mp3 → "Intro Song"
• track_name_here.mp3 → "Track Name Here"
• SongTitle.mp3 → "Song Title"

Numbers, dashes, and underscores are removed. Capitalization is corrected. Track titles can then be edited manually with instant preview in the editor.

External Audio URLs

Instead of uploading, you can use the "Custom URL" field to link to externally hosted audio files (CDN, Amazon S3, BunnyCDN, etc.).

Selecting Animation

1. Open "Track Cover Animation" section in Content Tab
2. Click "Animation Style" dropdown
3. Select from 13 available animations
4. Change applies instantly in live preview

Available Animations

Animation Behavior

Collapse Animation (Default)

The Collapse animation uses an accordion-style approach:

• Cover space expands when track starts playing
• On track change, space closes and reopens with new cover
• Cover space collapses when playlist ends

Carousel Animations (All Others)

All other animations use a carousel-style approach:

• Cover space opens once when playback starts
• Space remains open throughout playback session
• On track change, covers animate in/out within the same space
• Each animation has unique enter and exit transitions
• Cover space closes when playlist ends

Section 1: Player

Main player container styling:

• Background: Colors, gradients, or images
• Background Blur: Apply gaussian blur to images (0-50px)
• Overlay: Add color overlay with 16 blend modes and opacity control
• Border: Width, style, color
• Box Shadow: Multiple shadow layers with color, blur, spread, offset
• Padding: Internal spacing

Style Tab - Section 1: Player Container Controls

Section 2: Header

Album title and settings area:

• Title Color: Album title text color
• Typography: Font family, size, weight, letter spacing
• Text Shadow: Shadow effect for title
• Spacing: Top and bottom margins
• Settings Dots: Color, hover color, gap between dots

Section 3: Current Track Display

Currently playing track info area:

• Background Gradient: Start and end colors
• Text Color: Track and artist name color
• Typography: Font settings
• Border Radius: Rounded corners
• Padding: Internal spacing
• Margin: External spacing
• Shadow: Box shadow effect

Section 4: Playback Controls

Play, pause, next, previous buttons:

• Play Button: Gradient colors, icon color, shadow, min/max size
• Small Buttons: Background, icon colors, hover states, shadow, border radius, min/max size
• Controls Margin: Spacing around control buttons

Section 5: Volume Slider

Volume control popup styling:

• Popup Background: Background color
• Track Background: Slider track color
• Track Fill Color: Active volume color
• Thumb Fill Color: Slider handle fill
• Thumb Stroke Color: Slider handle border

Section 6: Progress Bar

Playback progress indicator:

• Background Color: Inactive track color
• Progress Gradient: Start and end colors for active progress
• Time Display: Color and typography for time stamps
• Border Radius: Rounded corners

Section 7: Track List

Playlist track items:

• Text Color: Track name color
• Typography: Font settings
• Hover State: Background and text color on mouse hover
• Active State: Background, border, text color for currently playing track
• Separator Color: Line between tracks
• Margins: Spacing for track items

Responsive Design

The player uses CSS Container Queries for responsive behavior. This means:

• Player adapts to its container size, not just screen size
• Works correctly in sidebars, columns, grids, any layout
• Consistent behavior across themes
• Supported in all browsers that meet the plugin requirements (Chrome 105+, Safari 16+, Firefox 110+)

View Modes

Toggle between Full View and Compact View using the hamburger menu icon (top right corner).

Full View:

• Shows clickable album cover thumbnail in header
• Shows track cover thumbnails in playlist
• Displays currently playing track cover with animation

Compact View:

• No album cover displayed
• No track cover thumbnails
• Minimal interface for limited space

Full View Mode

Compact View Mode

Shuffle Mode

Toggle shuffle on/off using the shuffle icon. When enabled, tracks play in random order.

Repeat & Shuffle Controls - Different States

Multiple Players Per Page

Add unlimited audio players to a single page. Each player can have different presets, playlists, and animations. Independent playback controls.

Unlimited Playlist Length

No artificial limits on track count. Add 5 or 500 tracks. Performance optimizations:

• Lazy loading: Audio files load only when needed
• Memory management: Only active tracks consume resources
• Smooth scrolling for long playlists

Automatic Asset Management

When importing presets with background images:

1. Plugin detects image URL in JSON
2. Downloads image from remote server
3. Uploads to WordPress Media Library
4. Attaches to player

All automatic - no manual intervention required.

Elementor Integration

• Live Preview: All changes appear instantly
• No Page Refresh: Adjust settings without leaving editor
• Responsive Preview: Test mobile, tablet, desktop views
• Copy/Paste: Duplicate players across pages
• Templates: Save configurations as Elementor templates

Smooth Track Title Transitions

When switching tracks, the current track display features a premium slide animation. The outgoing title gracefully slides up and fades out, while the incoming title slides in from below. This subtle detail adds a polished, professional feel that elevates the entire player experience.

Automatic: This animation works automatically on all track changes - whether triggered by clicking next/previous, selecting from playlist, or automatic advancement to the next song.

Audio File Naming

For best auto-title results:

• Use descriptive names: intro-track.mp3 instead of audio1.mp3
• Separate words with dashes or underscores
• Plugin removes numbers, dashes, underscores and corrects capitalization

Performance Optimization

• Optimize audio files: 128-256 kbps is sufficient
• Use MP3 for best file size/quality balance
• Host files on CDN if possible
• Optimize background images (max 500KB recommended)

Design Workflow

1. Choose preset close to desired style
2. Customize using Style Tab controls
3. Save as custom preset for reuse
4. Export for backup and use on other sites

Mobile Considerations

• Player is responsive by default
• Test on actual devices before publishing
• Consider compact view for narrow sidebars
• Ensure touch targets are appropriately sized

Support Includes

• Installation assistance and troubleshooting
• Configuration help
• Bug fixes and compatibility issues
• General usage questions
• Preset management assistance

Not Included in Support

• Custom feature development
• Theme/plugin integration beyond basic setup
• Custom design work
• Server configuration issues
• WordPress/Elementor training

Before Contacting Support

1. Check this documentation
2. Search CodeCanyon comments
3. Check browser console for errors (F12 → Console)
4. Try disabling other plugins
5. Verify compatible versions (WordPress, PHP, Elementor)

When contacting support, include:

• WordPress version
• PHP version
• Elementor version
• Active theme name
• Issue description
• Steps to reproduce
• Screenshots or video
• Browser console errors