[Pro] Using the Audio Player Widget

See this widget in action here.

Want to embed audio files directly on your website with a sleek, customizable player? The Audio Player widget in aThemes Addons Pro for Elementor lets you add media or external audio sources with full control over player elements, styling, and layout.

In this guide, we’ll walk you through how to use the Audio Player widget in aThemes Addons Pro for Elementor.

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This widget requires aThemes Addons Pro.

Activating the Widget

Navigate to your WordPress admin dashboard and open the aThemes Addons dashboard. Find the Audio Player widget and toggle it on to activate it. The widget is now available in the Elementor editor.

Exploring Widget Options

The Audio Player widget provides several sections to configure the audio source, player controls, content, and styling.

Configuring Audio Source Settings

Set up the audio source and playback behavior with these options:

  • Audio Source – Choose between a media file from the WordPress media library or an external URL.
  • Autoplay – Toggle to automatically start playing the audio when the page loads.
  • Loop – Toggle to restart the audio automatically when it reaches the end.
  • Preload – Set the preload behavior to Auto, Metadata, or None.

Configuring Player Elements

Control which player controls are visible to visitors:

  • Play/Pause Button – Toggle to show or hide the play and pause button.
  • Current Time – Toggle to display the current playback time.
  • Progress Bar – Toggle to show the audio progress bar.
  • Duration – Toggle to display the total audio duration.
  • Volume Control – Toggle to show the volume adjustment control.

Configuring Content and Alignment Settings

Add optional content and set the layout alignment:

  • Title – Enter an optional title to display above the audio player.
  • Description – Enter an optional description below the title.
  • Text Alignment – Set the alignment of the title and description to left, center, or right.

Customizing Container and Player Styling

Customize the visual appearance of the audio player with these styling options:

  • Background and Border – Set background colors, border styles, border radius, and box shadows for the player container.
  • Typography – Customize the title and description font families, sizes, weights, and colors.
  • Player Controls Background – Set a background color for the player controls area.
  • Time and Progress Bar Colors – Customize the colors of the time display and the progress bar.
  • Volume Bar Colors – Set the colors for the volume control bar.
  • Dimensions and Spacing – Adjust the player height, width, and padding values.

That’s it! You’ve successfully learned how to use the Audio Player widget in aThemes Addons Pro to embed customizable audio players on your Elementor-powered site.

Next, would you like to restrict access to specific content on your pages? Check out our guide on using the Content Protection extension to learn more.