How to Add Background Music to WordPress (and Elementor) with Autoplay

Adding background music to your WordPress website can significantly improve visitor behavior by creating a homely atmosphere or setting the right mood.

This guide will teach you how to place music on a specific page or throughout your entire site, using easy-to-follow instructions and either the Gutenberg editor or Elementor, without requiring the use of complex plugins.

This tutorial shows how to embed background music with autoplay functionality and control over the audio player visibility.

Adding Background Music to a Single WordPress Page

First, upload your desired audio file to your WordPress media library (or any other cloud storage app, such as Dropbox). 

Once uploaded, follow the steps below to insert background music to a specific page:

1. Open the WordPress page you want to add music to and click Edit.
2. Add a new HTML block using the Gutenberg editor. If you use Elementor, you can add an HTML widget instead.
3. Copy and paste the following HTML audio tag into the block:  <audio class="bg-music" controls src="YOUR_AUDIO_URL_HERE" autoplay loop></audio>
4. Replace YOUR_AUDIO_URL_HERE With the actual URL of your MP3 file from the media library.
5. Save or update the page and visit it to test the music. You should hear the audio playing automatically in the background, and the audio player controls will appear.

Hiding the Audio Player Controls

If you prefer the music to play silently in the background without showing the audio controls, you can easily hide them. Remove the controls attribute from the audio tag like this:

WordPress has a built-in CSS rule that hides audio players without controls, so once you remove the controls keyword and save, the music will continue playing, but the player itself won’t be visible.

Alternative Way to Hide the Audio Player Using CSS

If you want to keep the controls attribute for any reason but still hide the player from view, you can do so by adding custom CSS:

1. Make sure your audio tag has a unique class, for example, bg-music.
2. Go to Appearance > Customize > Additional CSS (or under the Advanced tab in Elementor) in your WordPress dashboard.
3. Add the following CSS code to hide the audio player: .bg-music { display: none; }
4. Publish the changes. The audio player will disappear from the page, but the music will still play in the background.

Adding Background Music to Every Page on Your WordPress Site

Music added directly to a single page will only play on that page. However, if you want background music to play site-wide, you need to add the audio code to the website footer.

The background music will be played on every page where the footer exists.

First, delete the audio player from the single page where you added it (in the previous step), so the music won’t be played twice. Then:

1. Add the audio code to your footer. You can do this in a couple of ways:
   • Using Elementor’s Code feature: Add a new custom code snippet and execute it after the page is loaded.
   • Add it directly to the footer template file.
   • Using a plugin like Code Snippets: Create a new snippet, paste your audio code under the HTML tab, and set it to load in the footer.
2. Remember to replace the source URL with the URL of your MP3 file.
3. Save and activate the snippet or custom code.
4. Visit any page on your website—you should now hear the background music playing everywhere, and the audio player will be visible in the footer.

Hiding the Audio Player Site-Wide

Just like with a single page, if you want to hide the audio player from all pages, remove the controls attribute from the audio tag in your footer code snippet or custom code. Save, and the music will continue to play silently across the entire site without showing the player.

Conclusion

Adding background music to WordPress is a quick and effective way to set the right tone for your website. If you want to hear music on a specific page or all pages, the autoplay and loop options of embedding an HTML audio element will enable you to do that on your own.

You can easily manage the visibility of the audio player either by removing the controls attribute or by applying custom CSS.

Plus, using Elementor’s code feature or a snippet plugin makes site-wide implementation straightforward.

Test this on your WordPress website and make your visitors feel more immersed!

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.