Audio Player Widget

Audio Player widget for Elementor showcase and play your audio file on your WordPress website. Easily add and share your audio by uploading a playlist or simply adding a link. Entice your visitors by customizing the player layout in an appealing way.

The Audio Player widget by Xpro is a premium Elementor Addon that has the capability to attract users and engage them with your content. The tool is great if you want to promote your music track, send a message, or add podcasts. You can add backgrounds, add amazing colors, adjust borders and shadows, and so much more.

How to Install Xpro Audio Player Widget for Elementor

Requirement

You need to install and activate the Pro version of Xpro Elementor Addons. If you already have the plugin installed, just ensure the Audio Player widget is ‘Enabled’ from the Xpro Elementor Addons dashboard. So, you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

Scroll down the Widgets tab of the Xpro Addons Dashboard, to find the “Audio Player Widget”, and then toggle the button ‘ON’ to enable it.

How to Use Xpro Audio Player Widget for Elementor

Developers can easily create and add a music or audio file to the Xpro Elementor Audio Player widget by uploading a file from their desktop or providing a link. Choose whether or not to include audio player features such as the seek bar, volume bar, and so on in the widget display. Style every element in the widget from the Style Tab. Let’s go over how to use the Audio Play widget for Elementor.

Step 1

Click on the Xpro Addons-Pro section available in the Elementor Editor.

Step 2

Search for Audio Player Widget from the left top search bar and then simply drag the addon to desired page location and drop.

The default view of the widget will look like this after you drop it into the Elementor Page Builder.

How to Add an Audio File in Xpro Audio Player Widget

Select a source from where you will add an audio file. Click and open a drop menu and select local if you want to upload a file from WordPress or desktop or select Remote if you want to add a URL.

Setting

From the Setting menu under the Content Tab, you can perform the following settings and display the widget in the way you want.

Duration: Select the option to display time, duration, or both.
Seek Bar: Enable the option to display a progress bar that shows the music duration.
Restrict Time: Enable and set a limit to restrict audio time.
Volume: Enable the option to display the volume icon.
Volume Bar: Display a volume bar from where users can adjust the volume.
Smoothly Enter: Smoothly start a song or audio.
Keyboard Enable: Allow users to control audio from Keyboard keys.
Auto Play: Automatically start playing music when the user views the widget display.
Loop: Set the audio on a loop that starts again after it ends.

How to Style Audio Player Widget for Elementor

Customize every element in the widget display and make it according to your requirement. Start the styling process from the Play Button where you first have the option to adjust the size of the play button.

Color the icon and background for normal and hover (when a user drags the mouse above the button) display.

You can add a border to the play button by selecting a border type between solid, double, dotted, dashed, or groove. Furthermore, you can personalize border color, width, and radius.

Moreover, you can give a shadow to the play button and adjust its appearance to horizontal and vertical axis including blurriness and spread.

How to Style Timer in Xpro Audio Player Widget

From the duration menu, you can choose the color in which the duration time will be presented. Furthermore, you can personalize the typography of the numbers from the typography box. The typography box allows you to change the size, font, weight, spacing, and other text customizations.

How to Style Seek Bar in Xpro Audio Player Widget for Elementor

Style the progress bar by adjusting the bar height. Moreover, select a color for the bar and its background. You also have the option to manage the radius of the bar border.

How to Style Volume Button

The Volume Button option provides the exact same styling features that were in the Play Button menu. Style size, color, border, and shadow under the Volume Button menu.

How to Style Volume Bar in Xpro Audio Player Widget

Customize the Volume Bar in the same way as you did with the seek bar. Under the volume bar, you have the option to adjust the bar height and select a color for the bar and background.

Best Audio Player Widget for Elementor

This was all from our Audio Player widget for Elementor. We hope you completely understand the functionality and feature usage of this amazing Xpro Elementor widget. Make full use of this widget to create a beautiful display of the audio layout and engage users with your content.

Xpro Elementor Addons offer a wide range of widgets, Elementor theme templates, and blocks that help designers develop an attractive site. Check our 50+ free addons for Elementor which are enough to create a professional WordPress website. If you want to explore and add more attractive Elementor widgets then check our complete list of Pro Elementor widgets and download our Pro Elementor addons right now. In case you want to grow your social media audience, you can easily utilize Xpro Social Share Widget to showcase social share icons in the most presentable way.