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.
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.
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.
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.
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 the title of your song here.
Add the author/singer of your song here.
Set how are you going to upload your media files(songs). You get two options to select from.
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.
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.
Add Audio files by URL, by entering the URL here.
Set your playlist image here by clicking the + icon.
Set your preferred image size from the dropdown. You can also add custom dimensions for your image.
Add a split text between Song Title and the Song Author. For eg: Girls Like Your by Maroon5
Set the max-width of your Audio Player widget. Click the small desktop icon to set different widths for Desktop, Tablet, and Mobile.
Set a default volume for your Audio Player widget by using the slider.
Set the position of your Switcher button. By clicking the alignment icons, you can set it to Left, Right or Center.
Set the typography of your song title.
Set the title color of your song title.
Set the typography of your song author.
Set the author color of your song.
Set the background color of control buttons here.
Set the border radius of control buttons here.
Set the icon color of control buttons here.
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.
Set the border of Play/Pause Icons. Choose any one border type from the dropdown. Add a color and width to it.
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.
Set the border type of Track image. Choose any one border type from the dropdown. Add a color and width to it.
Set the border radius of Track Image.
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