How to Add Site-Wide Background Music to a WordPress Website..!

There are many plugins for WordPress that will help you embed mp3 or other music files onto WordPress pages. There are even others that would let you show music playlists as widgets and that plays your favorite music to your site visitors.

But when it comes to playing a Background music, site-wide with auto-resume across page loads, it becomes a little tricky. I was playing with some plugins today and here is what I did to make it work.

Auto-Resume Tracks Across Page Loads

I got the Audio Playlist Manager with Auto Resume plugin that this guy Ameen built out of the original Audio Playlist Manager plugin. What this plugin does is add a nice widget (or embed on any page using shortcodes) an audio player. The audio player can be configured to auto-play on page load and resume playing on page-loads, both these features makes it the plugin of choice for our need.

Here is how we do it. Install the plugin first.

Go ahead and download a soothing free music track from here, they have color coding for different moods, which make them awesome! Of course, you can have any track you like, make sure you compress it to a smaller size (under 500kb) using a software like this one here.

Now in the plugin settings, create a playlist. Then upload the Audio File using the uploader and Add it to the playlist you created. Click on Preview Player. Make sure you tick the following:

• Begin playing automatically
• Resume playing on page changes
• Repeat when playlist ends
• Set an initial volume to something around 30 if your track is too loud. You don’t want to startle your visitors, or do you?

Audio Player Options

Now you will have a shortcode that looks something like this:

[ti_audio name="Play on Load" autoplay="1" autoresume="1" repeat="1" randomize="1" volume="30"]

Next, I added it to the footer.php (which is called on every page) using the do_shortcode function. But that showed the player on the footer for every page, like this:

So I added some css to hide it and lo! We have background music on all pages that plays on and on as long as the user is on the site. Here is the final code that I added to footer.php

<div style="visibility: hidden; margin-top: -32px;"><?php echo do_shortcode('[ti_audio name="Play on Load" autoplay="1" autoresume="1" repeat="1" randomize="1" volume="30"]'); ?></div>

Have fun!