---
title: "How to Add Audio Player in Elementor for MP3 Music, Podcast?"
url: https://theplusaddons.com/docs/audio-player-in-elementor-for-mp3-music-podcast/
date: 2024-02-22
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Add-Audio-Player-in-Elementor-for-MP3-Music-Podcast_-1024x536.jpg
word_count: 520
---

# How to Add Audio Player in Elementor for MP3 Music, Podcast?

## 

- The Audio Player widget adds a styled audio player to an Elementor page and supports a playlist of multiple tracks from the media library or an external URL.
- The Plus Addons for Elementor marks Audio Player as Pro only, and the widget is part of The Plus Addons for Elementor Pro, which must be installed and activated.
- The Playlist repeater uses one track per item, with Song Title, Song Author, Source, File, and Image fields, and it supports .mp3, .wav, .ogg, .flac, and .m4a files.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/audio-player/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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:

![The Styles dropdown, choosing one of the Audio Player's pre-built player designs.](https://theplusaddons.com/wp-content/uploads/2026/09/audioplayer-styles.webp)

## 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. | - |

![A playlist item's Source dropdown, with Self Hosted and External options.](https://theplusaddons.com/wp-content/uploads/2026/09/audioplayer-source.webp)

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.

![The Audio Player widget rendered on the page, showing the track title, author and controls.](https://theplusaddons.com/wp-content/uploads/2026/09/audioplayer-result.webp)

## 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.

## Frequently Asked Questions

**Q: What do I need before adding an audio player in Elementor?**
A: The Audio Player widget is Pro only, so The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH needs the Pro version installed and activated first. The widget supports playlists from your media library or an external URL, and the supported file types are .mp3, .wav, .ogg, .flac, and .m4a. That matters because unsupported files or a missing Pro install will stop the player from being useful before you even build the playlist.

**Q: Why does the audio player show up but not play audio?**
A: The most common failure point is the audio file itself, not the widget. The page says to open the file URL directly in a browser tab and confirm it is reachable. External URLs can also be blocked by a host’s cross-origin policy, which can silently prevent playback with no on-page error. If that happens, re-hosting the file in your own media library as Self Hosted is the safer path.

**Q: Should I use a self-hosted file or an external URL for podcast audio?**
A: Self Hosted is the safer choice when you want fewer playback surprises. The page notes that External URLs depend on the remote host actually serving the file and that restrictive cross-origin policies can block playback without an on-page error. A Self Hosted file from your own media library avoids that host-side restriction. For podcast-style audio, that usually means fewer broken-playback cases and less debugging later.

**Q: What audio file formats work with the Elementor audio player?**
A: The widget supports .mp3, .wav, .ogg, .flac, and .m4a for both Self Hosted and External sources. That detail matters because the source type does not change format support, so you still need a direct audio file in one of those formats. If a track is outside that list, it is a bad fit for this player even if the URL itself looks valid.

**Q: How does the playlist work in the audio player widget?**
A: The playlist is built as a repeater where each item becomes one track. Each track can show Song Title and Song Author text, plus an Image thumbnail in the playlist. The page also says you can click + Add Item to add more tracks. That structure is useful when you want multiple songs or podcast episodes in one player instead of separate widgets on the page.

**Q: What should I expect after publishing an Elementor audio player?**
A: The player renders with track title, author, and playback controls once it is published. In testing, clicking Play swapped the icon to Pause and triggered a network request for the audio file, which shows the play mechanism itself was working. The catch is that audible playback still depends on the actual file being reachable and allowed by its host, especially for External URLs.