< All Topics

Let your visitors play a song or a podcast on your website using the Audio Player widget. You can showcase a single song from your collection or a complete playlist. This widget can be widely used on Music Streaming, DJ, Events, and Podcast websites.

Pro tip
Try doing something different with the Audio Player. We have an idea. Why not ask your clients to share an audio testimony about your products or services? And, then add these audio testimonials to your website by creating a playlist. A good way to build trust and boost sales? Isn’t it?

How to use the Audio Player Widget of The Plus Addons For Elementor

The Audio Player widget comes with 9 different styles and a plethora of customization options using which you can create stylish looking players for your websites.

Table Of Contents

General Steps

Search for the Audio Player element from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Audio Player widget. First, click on the Content tab.

1. Content

Audio Player

Styles

Select your preferred Audio Player style from the dropdown. We have provided 9 different styles to choose from. Keep switching the styles to see the different design layouts and settle on one.

Select audio player style in Audio Player widget.

Playlist

By default, there will be one sample playlist created for you. You can either add a new one or duplicate the existing one and start adding your content. Use the Add Item button to add a new playlist. Click the + icon on the playlist to duplicate it.

Add Title, Author, Source, and URL in Audio Player widget.

Song Title

Add the title of your song here.

Song Author

Add the author/singer of your song here.

Source

Set how are you going to upload your media files(songs). You get two options to select from.

Self Hosted
Upload the media files on your own server (i.e. uploading to your WordPress Media Library).  After you select the Self Hosted option, you will see the File Upload option. Click on it to add all your songs.

External
Add an external URL to your hosted song or playlist such as Soundcloud. You will see an option to add a custom URL after you select the External option.

URL

Add Audio files by URL, by entering the URL here.

Image

Set your playlist image here by clicking the + icon.

Common Setting

Image Size

Set your preferred image size from the dropdown. You can also add custom dimensions for your image.

Change Image size in Audio Player widget.

Split Text

Add a split text between Song Title and the Song Author. For eg: Girls Like Your by Maroon5

Max Width

Set the max-width of your Audio Player widget. Click the small desktop icon to set different widths for Desktop, Tablet, and Mobile.

Default Volume

Set a default volume for your Audio Player widget by using the slider.

Alignment

Set the position of your Switcher button. By clicking the alignment icons, you can set it to Left, Right or Center.

2. Style

Song Title

Typography

Set the typography of your song title.

Title Color

Set the title color of your song title.

Song Author

Typography

Set the typography of your song author.

Author Color

Set the author color of your song.

Control

Background Color

Set the background color of control buttons here.

Border Radius

Set the border radius of control buttons here.

Icon Color

Set the icon color of control buttons here.

Size

Set the size of control buttons here.

Play / Pause Icon Size

Set the size of Play / Pause icons.

Play / Pause Icon Color

Set the color of Play / Pause icons.

Play / Pause Background Size

Set the background size of Play/Pause Icons.

Play / Pause Background Type

Set the background type of Play/Pause Icons. You can set a normal color or gradient.

Border Type

Set the border of Play/Pause Icons. Choose any one border type from the dropdown. Add a color and width to it.

Border Radius

Set the border radius of Play/Pause Icons.

Responsive Options for every section can be found by clicking the small desktop icon. Click it to set options for Tablets and Mobiles.

Track Image

Border Type

Set the border type of Track image. Choose any one border type from the dropdown. Add a color and width to it.

Border Radius

Set the border radius of Track Image.

Box Shadow

Set the box shadow of the Track Image. Set the shadow color and other options like horizontal, vertical, blur, spread, and position.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?