The Audio Player widget adds a styled audio player to your Elementor page, with support for a playlist of multiple tracks from your media library or an external URL.
It is a Pro-only widget of The Plus Addons for Elementor.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro only.
- Go to The Plus Addons > Widgets, search for Audio Player and turn the toggle on.
How to Add an Audio Player in Elementor
Add the Audio Player widget to the page, then choose a player style:
Building the Playlist
Open the Playlist repeater. Each item is one track:
| Setting | What it does | Default |
|---|---|---|
| Song Title / Song Author | The text shown on the player for this track. | “ThePlus Audio” / “The Plus” |
| Source | Choose Self Hosted to use a file from your media library, or External to link to an audio file hosted elsewhere. | External |
| File (Self Hosted) / URL (External) | The audio file itself – upload/select a file, or paste a direct link. | – |
| Image | A track thumbnail shown in the playlist. | – |
Supported file types for both sources: .mp3, .wav, .ogg, .flac, .m4a. Click + Add Item to add more tracks to the playlist.
How It Behaves
We built a playlist with one External track and published the page.
- The player renders with the track title, author, and playback controls.
- Clicking Play swaps the icon to Pause and the browser fires a network request for the audio file – the play mechanism itself is working.
- We could not confirm sustained, audible playback: the specific external file we used for testing was blocked by that host’s own cross-origin policy in the browser (this is the test file host’s header choice, not something the widget itself does – its own code plays the URL with a plain, unmodified audio call). A Self Hosted file from your own media library, or an External URL from a host that allows cross-origin audio, should not hit this.
Limitations
- If you use an External URL, the remote host needs to actually serve the audio file for playback to work in the browser – a host with a restrictive cross-origin policy can silently block it with no on-page error.
- We tested the Self Hosted vs. External Source switch and the Styles dropdown; the remaining Style-tab appearance controls (Song Title, Song Author, Control, Tracker, Playlist, Player Background) were not individually exercised.
The player loads but nothing plays when I click Play
Check that the audio file itself is reachable – open its URL directly in a browser tab. If it’s an External URL, some hosts block cross-origin audio requests; try re-hosting the file in your own media library (Self Hosted) instead.
Not verified
So you know exactly what has and has not been checked:
- Audible playback to completion with a real audio file – our test file’s host blocked the cross-origin request in the browser before we could confirm sound output.
- The Common Setting group (Image Resolution, Split Text, Max-width, Default Volume) and the individual Style-tab sections beyond Styles – read from source but not exercised on the front end.
