Do you want to add a music player bar in the navigation header menu? With the Header Meta Content widget from The Plus Addons for Elementor, you can easily add a music player bar in the navigation header menu.
This feature allows for easy access to music or audio clips while browsing the website, creating a seamless and enjoyable user experience.
To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
What It Does
The Header Meta Content widget in The Plus Addons for Elementor includes a Music option in its Meta Content repeater. Turning it on adds a small play and stop control to your header that streams an .mp3 or .ogg audio file straight from your WordPress media library, no separate audio-player plugin required.
To do this, first you have to add the audio file in the media library.
Note: Only .mp3 and .ogg audio file types are supported.
Then, add the Header Meta Content widget to the header template and follow the steps below.
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
Why It Matters
Portfolio sites, podcast pages, radio stations, and event or wedding sites often want a piece of background audio available without forcing autoplay on every visitor. A header music toggle gives people an obvious, optional play and stop button instead of hiding audio inside a page embed, and it stays visible in the navigation across every page that uses the header template.
What You Get
- A Music item inside the Header Meta Content widget’s repeater, placed alongside your other header icons.
- A dedicated Music Options tab with its own on/off switch, so the control stays hidden until you enable it.
- A choice of two icon styles for the play and stop button.
- A direct .mp3/.ogg file field, pointed at a file in your media library.
- A volume slider to set the default playback level.
- A separate Style tab (Music Bar Style) for typography and color once the control is live.
Benefits
- No extra plugin: the audio control ships inside the widget you already use for header icons.
- Visitor-controlled: a visible play and stop button, not a forced autoplay embed.
- Consistent placement: sits with your other header meta icons (search, cart, language, and so on) instead of floating separately.
- Simple setup: upload the file, paste the URL, flip the switch.
Capabilities
- Select Options dropdown in the Meta Content repeater, where choosing Music adds the audio item to your header.
- Icon spacing controls (Icon Left Space, Icon Right Space) for the music icon specifically.
- Responsive Device visibility settings, so the music control can be hidden on chosen device sizes.
- Display Music switcher in the Music Options tab that turns the control on or off independent of the repeater item.
- Icon Style dropdown with Style 1 and Style 2 options for the play and stop icon.
- Audio .Mp3/.Ogg URL field for pointing the control at your uploaded file.
- Music Volume slider (0-100) to set the starting playback volume.
- Music Bar Style tab for typography and color once Display Music is enabled.
How It Works
The Meta Content repeater treats Music as one more item type, the same way it treats a search icon or a mini cart. Once an item is set to Music, the Music Options tab’s Display Music switch controls whether that item actually renders in the header. When enabled, the widget outputs a play and stop toggle that streams the file from the Audio .Mp3/.Ogg field at the volume set on the Music Volume slider, styled by whichever Icon Style you pick.
How to Use It
1. In the Meta Content tab, you’ll find an item click to open it, then select Music from the Select Options dropdown.
Suggested reading, 5 best WordPress audio player plugins.
Then do the necessary icon spacing adjustments from the Icon Left Space and Icon Right Space sections.
From the Responsive Device section, you can manage the visibility of the item for different devices if needed.
2. Then go to the Music Options tab and enable the Display Music toggle.
Select a style from the Icon Style dropdown.
3. In the Audio .Mp3/.Ogg field you have to add the audio file path.
From the Music Volume slider, you can adjust the audio volume.
Now you’ll see a music player button in the header that you can use to play and stop the audio.
Use Cases
- Wedding, event, or portfolio sites that want an optional background track available across every page.
- Podcast or radio-station sites that want a quick preview clip playable directly from the header.
- Musicians or bands showcasing a single featured track without embedding a full player widget on every page.
Limitations
- The Audio .Mp3/.Ogg field only accepts .mp3 and .ogg files; other audio formats are not supported by this control.
- This is a single-track control, not a playlist or multi-track player. Only one Audio .Mp3/.Ogg file can be set per Music item.
- Music is one placement option inside the Header Meta Content widget’s repeater, not a standalone widget, so it shares the widget’s Meta Content and Style tabs with your other header icons (search, cart, language switcher, and so on).
- The control is a manual play and stop toggle. It does not autoplay and has no built-in seek bar or track title display.
Troubleshooting
- The music button does not appear in the header. Confirm both that a Meta Content item is set to Music in the repeater, and that Display Music is switched on in the Music Options tab. Both conditions are required per the widget’s source; either one alone leaves the control hidden.
- Clicking the button does nothing. Check that the Audio .Mp3/.Ogg field contains a valid, publicly reachable file URL and that the file is actually .mp3 or .ogg. A broken URL or an unsupported format will not play.
- The audio plays too loud or too quiet. The Music Volume slider sets only the default starting volume for that item; adjust it in the Music Options tab rather than expecting visitors to have a separate volume control.
- The icon shows but styling looks off. Music Bar Style controls only apply while Display Music is enabled. If the toggle is off, style changes will not visibly apply until you turn it back on.
Also, read how to add WooCommerce mini cart in Elementor navigation header menu.
