Table of contents

Why background music can be tricky in WordPress 1. Choose your audio file and format 2. Upload your audio file to the WordPress Media Library 3. Choose a plugin for persistent background audio 4. Add your audio player to a persistent part of the site 5. Test your autoplay and user experience 6. Extra tips and best practices Getting started

Get the industry’s fastest WordPress hosting ◦ 99.999% uptime
◦ Comprehensive security
◦ 24/7 support

WordPress Guide → Development → Add Continuous Background Music

How to add continuous background music to a WordPress site

Adding background music can set the mood, enhance storytelling, or make your site more memorable. But if you want the music to keep playing while users click around your site, you’ll need more than just an embedded audio file. WordPress reloads the page with every new click—so without the right setup, your music stops every time.

Let’s walk through how to add background music to your WordPress site that plays continuously across pages, and actually stays playing.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

Why background music can be tricky in WordPress

WordPress pages reload fully by default. When that happens, any embedded audio or JavaScript-based player also reloads—meaning your background music starts over or stops entirely.

Modern browsers add another challenge: many now block autoplaying audio unless the user interacts with the page first. That means music won’t start until someone clicks something.

To solve this, you’ll need to:

Upload your music in a supported format
Use a persistent audio player
Embed it in a static part of your layout like the header or footer
Make sure your setup accounts for autoplay behavior

1. Choose your audio file and format

Start by selecting the track you want to use for background music. Make sure it’s properly formatted and web-optimized:

Use .mp3 or .ogg for broad browser compatibility. Avoid .wav or .flac for now—they’re larger and not as widely supported.
Compress large audio files using an online tool like MP3Smaller or Audacity to keep your site fast.
Keep the duration reasonable. Looping a short 1–3 minute clip is often better than trying to stream a full album.
Double-check the copyright/license if you didn’t create the music yourself.

2. Upload your audio file to the WordPress Media Library

Once your file is ready, upload it to your site:

In your WordPress dashboard, go to Media > Add New.
Click Select Files and upload your .mp3 or .ogg file.
Once it finishes uploading, click the file to open its attachment details.
Copy the File URL shown in the right-hand panel. You’ll need this to embed the audio player.

This step gives you a hosted version of your audio file on your own site, so it can be used in custom HTML or a plugin.

3. Choose a plugin for persistent background audio

To keep audio playing across multiple pages, you need a plugin that creates a persistent or “sticky” player that doesn’t reload.

Here are three plugin options that make it easy to add looping, autoplaying audio:

AudioIgniter

Free and beginner-friendly.
Lets you add single tracks or playlists.
Clean design with built-in shortcode support.
Optional autoplay and looping.

To use AudioIgniter:

Install it from Plugins > Add New, then activate.
Go to AudioIgniter > Playlists > Add New.
Name your playlist and add a track using the URL from your media library.
In the settings panel, enable Autoplay and Loop if desired.
Copy the generated shortcode and paste it into a custom HTML widget in your header, footer, or a floating sidebar.

CP Media Player

Supports MP3, MP4, and other file types.
Includes custom styling options.
Works well in widget areas and footers.

To use CP Media Player:

Install and activate the plugin.
Go to Settings > CP Media Player and customize your settings.
Add a widget via Appearance > Widgets and drag CP Media Player into a footer or sidebar widget area.
Enter the audio file URL and adjust playback options.

Html5 Audio Player – MP3 Player for WordPress

Simple, mobile-friendly player.
Autoplay and loop settings available.
Add via shortcode or block editor.

To use HTML5 Audio Player:

Install and activate the plugin.
Go to Html5 Audio Player > Add New Player.
Give it a title and paste in your audio file URL.
Enable Autoplay and Loop under settings.
Place the player shortcode in a custom HTML widget, footer, or reusable block that loads site-wide.

4. Add your audio player to a persistent part of the site

To make sure your music doesn’t restart every time a visitor clicks a link, you need to place the player somewhere that doesn’t reload—like your site’s header, footer, or a fixed widget area.

Option 1: Use a footer widget

Go to Appearance > Widgets.
Find a Footer Widget Area and add a Custom HTML block (or plugin-specific widget).
Paste your shortcode or embed code.

Option 2: Use a floating/fixed position bar (via page builder or CSS)

If your theme or page builder allows, create a floating bar or sticky section that loads across all pages:

In Elementor, create a reusable header or footer block and place your audio player there.
Use custom CSS to fix a div or widget to the bottom/top of the screen. Example:

<div style="position:fixed; bottom:0; left:0; width:100%; z-index:9999; background:#fff; padding:10px;">   <audio controls autoplay loop>     <source src="https://yourdomain.com/wp-content/uploads/your-audio.mp3" type="audio/mpeg">     Your browser does not support the audio element.   </audio> </div>

Make sure your theme or layout doesn’t override position: fixed, and test for mobile compatibility.

5. Test your autoplay and user experience

Once everything is in place, test the music player across common browsers (Chrome, Safari, Firefox, Edge) and devices.

Things to watch for:

Autoplay restrictions: If music doesn’t start automatically, users may need to click once on the page. This is normal on Chrome and Safari.
Loop behavior: Confirm that the track loops smoothly without delay.
Navigation interruptions: If the music cuts out on page change, your player may not be in a persistent area. Try placing it in a site-wide header or footer again.
User control: Always include play/pause buttons. Some users may want to mute the audio or adjust volume.
Mobile testing: Confirm that the player displays correctly and doesn’t cover important mobile UI elements.

6. Extra tips and best practices

If you’re adding background music to your WordPress site, keep these tips in mind:

Use music sparingly. Not all users enjoy audio while browsing—avoid autoplaying music on every page unless your audience expects it.
Provide a mute or volume toggle. Always give users control.
Use short, looping clips. A 30-second background loop works better than a full 5-minute track.
Respect accessibility. Avoid music that plays over important content, like screen reader audio or video with dialogue.
Load asynchronously if possible. To avoid delaying your page load, try not to load large audio files before your primary content.

Getting started with adding background music to WordPress

Adding continuous background music to a WordPress site takes more than just uploading an MP3—it requires persistent placement, autoplay setup, and careful UX choices. Done well, it creates an immersive, memorable experience.

Start by uploading your music and installing a persistent audio player like AudioIgniter or HTML5 Audio Player. Embed it in a site-wide footer or sticky section, then test playback across different devices.

Ready to upgrade your WordPress experience? Professional hosting improves speeds, security, and reliability for a website and a brand that people find engaging and trustworthy.

Don’t want to deal with server management and maintenance? Our fully managed hosting for WordPress is the best in the industry. Our team are not only server IT experts, but WordPress hosting experts as well. Your server couldn’t be in better hands.

Click through below to explore all of our hosting for WordPress options, or chat with a WordPress expert right now to get answers and advice.