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.
Select your preferred source of your content from the dropdown. You can add custom content or you can fetch the content from your templates.
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 this + 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.
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 Song Author. For eg: Girls Like Your by Maroon5
Set the max-width of your Audio Player widget. Click the 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.
The Style tab is used for customizing the look of all the Audio Player widget components such as Song Title, Song Author, Split Text, Control, Tracker, Playlist, and Player Background.
All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.
View On Scroll View Animation Tutorial