Audio Player

The Audio Player Widget allows you to add, style, and manage an audio player anywhere on your Elementor-powered page. It’s perfect for embedding audio files such as podcasts, music, or voiceovers, with customizable playback controls, styling options, and responsive settings.

Whether you’re designing a podcast page, music portfolio, or educational section, the Audio Player Widget makes it easy to integrate audio content with a sleek and user-friendly interface.

Key Features:

• Embed audio files with a customizable player
• Support for MP3 and other common audio formats
• Display playback controls (play/pause, volume, progress bar)
• Customize player style, colors, and layout
• Fully responsive and optimized

🚀 How to Enable the Audio Player Widget

To start using the Audio Player Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Audio Player Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Audio Player Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page in the Elementor Editor.
• Search for “Audio Player” in the Elementor widget panel.
• Drag and drop the Audio Player Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, indicating it’s from the Topper Pack.

Step 2: Configure Audio Player Settings

• Under the Content → Audio section:
  • Upload an Audio File (e.g., MP3) or provide a URL to the audio source.
  • Toggle Autoplay to “Yes” to start the audio automatically (note: browser restrictions may apply).

Step 3: Style the Player

• Under the Style → Player section:
  • Adjust Player Width and Height to set the size of the audio player.
  • Set Background Color and Border Color for the player.
  • Customize Control Icons Color and Hover Color for play/pause, volume, and other controls.
  • Adjust Border Type, Border Radius, and Box Shadow for the player container.

Step 4: Style the Progress Bar

• Under the Style → Progress Bar section:
  • Set Progress Bar Color and Background Color for the progress bar.
  • Adjust Height of the progress bar for better visibility.
  • Customize Hover Effects for the progress bar.

Step 5: Style the Container

• Under the Style → Container section:
  • Adjust Alignment to position the audio player (e.g., left, center, right).
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Margin and Padding to control spacing around the player (e.g., top, right, bottom, left).

✅ Final Preview and Save

Once your Audio Player Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.