See this widget in action here.
The Audio Player Widget enables you to embed and play audio files or external audio links directly on your Elementor-powered site. It offers numerous customization options, including autoplay, looping, progress display, volume control, and styling adjustments to fit your site’s branding.
Activate the Widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it:
- Navigate to the aThemes Addons dashboard in your WordPress admin area.
- Find the Audio Player widget.
- Toggle the switch to activate the widget. It will now be available within the Elementor editor.
Widget Options
Audio Source Settings
- Audio Source: Choose between a media file uploaded to your WordPress site or an external URL.
- Autoplay: Enable this to automatically play the audio when the page loads.
- Loop: Set the audio to continuously loop after completion.
- Preload: Select whether the browser should preload the audio file automatically, preload metadata only, or not preload at all.
Player Elements
- Play/Pause Button: Choose to display or hide the Play/Pause button.
- Current Time: Display or hide the audio’s current playback time.
- Progress Bar: Enable or disable the progress bar showing playback position.
- Duration: Show or hide the total length of the audio.
- Volume Control: Enable or disable volume controls.
Content & Alignment Settings
- Title: Add an optional title to appear above your audio player.
- Description: Add an optional description providing more information about the audio.
- Text Alignment: Align the title and description text left, center, or right.
Container & Player Styling
- Background & Border: Customize background colors, borders, border-radius, and shadows for the audio player container.
- Typography: Control font style, size, and colors for the title and description.
- Player Controls Background: Adjust the background style of the player controls area.
- Time & Progress Bar Colors: Set colors for the playback time text and progress bar.
- Volume Bar Colors: Customize the appearance of the volume bar and its background.
- Dimensions & Spacing: Adjust player height, width, padding, and spacing for optimal appearance.
Conclusion
The Audio Player Widget is an excellent solution for integrating audio content seamlessly into your website. With extensive customization options, it’s ideal for podcasts, music previews, audiobooks, or any type of audio content you wish to feature.