How to use Audio Player Widget of Sky Addons for Elementor

Audio Player is a stylish music and podcast player widget for Elementor that replaces the plain browser audio element with a designed player. Choose between Modern, NextGen, Card, and Vinyl player styles, show a cover image with track title and artist, and add an animated wave bar for a real music-app feel. The Audio Player widget for Elementor supports local files and remote URLs (MP3, OGG, WAV, WebM, M4A), with autoplay and loop options. This documentation will guide you through the process of using the Audio Player Widget to present music, podcasts, and voice content on your website.

Features:

1. 4 Player Styles: Modern, NextGen, Card, and a record-style Vinyl player with an optional spinning cover on play.
2. Local and Remote Audio: Play files from your Media Library or any external URL — MP3, OGG, WAV, WebM, and M4A are supported.
3. Track Info: Display the track title and artist name with alignment control, both supporting dynamic tags.
4. Cover Image: Show album art with position (left or top) and alignment options.
5. Animated Wave Bar: An optional equalizer-style wave animation that brings the player to life.
6. Autoplay and Loop: Start playback automatically and repeat the track when it ends.
7. Full Style Control: Dedicated style sections for the card, cover, play button, progress bar, time display, volume, and wave bar.

Insert Audio Player Widget

1. Open Elementor Editor. In the Elementor panel, search for “Audio Player” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Choose a Layout

In the Layout section, pick the look of the player and decide which controls are visible:

1. Player Style: Choose Modern, NextGen, Card, or Vinyl. The Vinyl style turns the cover into a record with a circular progress ring.
2. Rotate Image on Play: (Vinyl style) Spin the cover image while the audio is playing.
3. Show Volume: Toggle the volume icon and slider.
4. Show Time: Toggle the current / total time display next to the progress bar.
5. Show Wave: Toggle the animated equalizer-style wave bar.

Configure Content

Set the audio source and the information shown around the player:

1. Audio Source: Pick Local Audio to choose a file from the Media Library, or Remote URL to stream from any address. MP3, OGG, WAV, WebM, and M4A are supported, and both fields accept dynamic tags (post meta, media, URL).
2. Autoplay: Start playback automatically when the page loads.
3. Loop: Restart the track automatically when it finishes.
4. Track Info: Toggle Show Track Info, then enter the Track Title and Artist name and set their Alignment (left, center, right).
5. Cover Image: Toggle Show Cover, choose the image, and set the Media Position (left or top of the controls) and Media Alignment.

Style Your Player

Every part of the player has its own style section, so you can match the player to your site’s design — from a minimal podcast strip to a bold music card.

1. Card:
   Style the player container with spacing between cover and controls, background, border, border radius, box shadow, and padding.
2. Cover Image:
   Set the cover width and height (or Vinyl Size and Ring Gap for the Vinyl style), plus border, border radius, and box shadow.
3. Controls Area:
   Add padding around the right-hand controls block.
4. Track Info:
   Separate color and typography controls for the track title and the artist name.
5. Play Button:
   Icon color and background for normal and hover states, plus size and border radius.
6. Progress Bar:
   Fill color, track color, and bar height.
7. Time Display:
   Color and typography for the current / total time.
8. Volume:
   Accent color for the volume icon and slider thumb.
9. Wave Bar:
   Color, height, bar width, spacing, border radius, and vertical margin of the animated wave.

Save and Preview

1. Once you’ve customized and styled your player, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Best Practices

1. Consistency: Maintain a consistent style with the rest of your website for a cohesive look.
2. Use Compressed Audio: Serve MP3 or M4A files at a reasonable bitrate so the page stays fast.
3. Accessibility: Keep the time display and volume control visible so visitors can manage playback easily.
4. Testing: Check playback and layout across different devices and screen sizes for a responsive design.

Troubleshooting

1. Autoplay Not Working: Most browsers block autoplay with sound until the visitor interacts with the page — this is a browser policy, not a widget bug.
2. Remote Audio Won’t Play: Confirm the URL points directly to an audio file (e.g. ends in .mp3) and that the remote server allows playback from your domain.
3. Styling Issues: Some style sections only appear when their element is enabled (e.g. Wave Bar requires Show Wave); clear cache if recent changes aren’t displaying.

Frequently Asked Questions

What audio formats does the Audio Player widget support?

MP3, OGG, WAV, WebM, and M4A. You can serve them as Local Audio from the WordPress Media Library or as a Remote URL from any external server.

How do I autoplay audio in Elementor with the Audio Player?

Enable the Autoplay switch in the Audio Source section. Keep in mind that modern browsers block autoplay with sound until the user interacts with the page, so treat autoplay as a hint rather than a guarantee.

How do I create a spinning vinyl record player in Elementor?

Set Player Style to Vinyl and enable Rotate Image on Play. The cover becomes a record with a circular progress ring, and you can tune the Vinyl Size and Ring Gap in the Cover Image style section.

Can I show the track title and artist name on the player?

Yes. Enable Show Track Info in the Track Info section, then fill in the Track Title and Artist fields. Both support dynamic tags, and each has its own color and typography controls.

Is the Audio Player widget good for podcasts?

Yes. Use a Remote URL to stream episodes from your podcast host, show the episode name as the Track Title, and enable Loop or the time display as needed — the Card and Modern styles work especially well for episode lists.

Related Documentation

• PDF Viewer Widget
• Card Widget
• Image Compare Widget
• Testimonial Widget

Conclusion

The Audio Player Widget by Sky Addons for Elementor gives your music, podcasts, and voice content a player worth listening to. Utilize its four styles and detailed controls to create a polished listening experience. For further assistance, consult the Sky Addons support team or community forums. Enjoy sharing your sound!