The Audio Player widget for Elementor by Unlimited Elements allows you to easily integrate audio content into your website. Whether you’re sharing podcasts, music tracks, or audio tutorials, this widget provides a customizable and user-friendly way to engage your audience with sound. Packed with flexible options, it ensures seamless playback while aligning perfectly with your website’s design.
Let’s look at each of the options in the Audio Player widget for Elementor below.
Add a Audio Player Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Audio Player”
- Hover over the widget in the search results and click install
- Add the “Audio Player” widget to any Elementor Page
Content Settings
Image
Choose an image to display.
Audio File Source
Select the audio file source.
- Special Audio Select
- Dynamic Text Field
Audio File
Select the audio file from media library.
Title
Type text for title.
Description
Type text to show as description.
Start Volume Level
Set the starting volume level of audio.
Loop
Turn on the loop option.
Autoplay
Turn on the autoplay option.
Volume
Choose the layout of volume bar.
- Horizontal
- Vertical
Download Button Text
Type text to show in the download button.
Layout Settings
Show Thumbnail
Show/hide the thumbnail.
Show Title
Show/hide the title element.
Show Description
Show/hide the description.
Show Progress Bar
Show or hide the progress bar.
Show Current Time
Show the current timing on audio player
Show Duration Time
Show/hide the total duration of audio file.
Show Volume
Show or hide the volume controller.
Show Download Button
Show/hide the download button.
Icons Settings
Paste Font Awesome unicode for various icons.
Play Icon
Paste font awesome unicode for play icon.
Pause Icon
Paste font awesome unicode for pause icon.
Mute Icon
Paste font awesome unicode for mute icon.
Unmute Icon
Paste font awesome unicode for unmute icon.
Replay Icon
Paste font awesome unicode for replay icon.
Audio Player Widget Styling
A variety of styling options are available, giving you complete control over the widget’s design. Select colors that align with your website’s aesthetic. You can customize the text, icons, fonts, and layout to ensure the widget looks and functions exactly as you envision.
Player Styling
Set the player background, padding, border, and radius.
Controls Styling
Style the audio controls padding, background, radius, and border.
Image Styling
You can set the image width, border, radius, and spacing.
Title Styling
Here, you can set the title typography, color, shadow, and spacing.
Description Styling
You can set the typography, color, shadow, and spacing of description element.
Progress Bar Styling
You can style the progress bar color, spacing, and track color.
Play/Pause Icon Styling
Here, you can set the play/pause icon color, background color, border, radius, and spacing.
Volume Styling
You can set the volume track color, progress color and icon color.
Time Duration Styling
Set the time duration typography, color, and spacing.
Download Button Styling
Style the download button padding, color, text color, spacing, border, radius, and typography.
Audio Player Design Examples For Elementor
Here are some live use cases for the Audio Player Widget.
Audio player with album cover.
Audio player with custom player features.
Thank you for exploring the Audio Player Widget for Elementor! This widget is a fantastic way to make your website more engaging by incorporating audio content effortlessly. If you have any questions or need further assistance, feel free to reach out.
