What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add Background Music to Your WordPress Website

How to Add Background Music to Your WordPress Website

A web page accompanied by music gives readers pleasure and makes them feel relaxed. This shows that music is capable of exaggerating atmosphere more easily than words. To let visitors enjoy their reading time, you might as well add background music to each page and post. This guide is made to this end.

WordPress has developed a mass of plugins with the view of allowing the entire website to dub in background music, among which Soundy Background Music is selected in the following guide. This plugin plays a soundtrack on a page/post once it is displayed. Unlike the audio player playing more than one soundtrack on a page/post, each web page comes with unique background music.

Play Background Music on Your Entire Website

Install and activate the plugin via WordPress dashboard > Plugins > Add New and then check the item “Soundy Background Music” appears under Settings. Here you come to the Soundy Background Music Plugin Settings page. This is where to set the default background music valid for all web pages.

Set default background music for entire website

The Audio Track Options tab is where to set default soundtrack for your whole website, which covers all pages and posts. Enable background sound per default and then modify the rest options one by one. Make sure that you have uploaded a great music to your website media library. Click “Media Library” and select the music as planned. For the music upload just now is in MP3 format, we are required to select “audio/mpeg” from the Audio Type list.

Audio Track Options

Adjust the volume if necessary and give the current music a proper title. It would better be the name of this music. Check “Autoplay” to play music automatically when visitors access to a web page. The “Audio Repeat Loop” enables music to play on a continuous loop. The “Reset” button brings audio back to default.

Customize the play & pause button

By default, two colors are available for the play & pause button, including blue and grey. The Play/Pause Normal button is the one shown on the web page while the Play/Pause Hover is the one displayed only when visitors hover over on it. The default button can be replaced to any other images if needed.

Play & Pause Button

The “Swap” option is used to swap the color of Normal to Hover. Besides, there are four sizes available for the play/pause button, including 24×24, 32×32, 48×48 and 64×64. Select a to make the button match your web design perfectly. Having all settings done, preview the button on any page as needed.

Make a decision on where to display the play/pause button

The play/pause button is displayed on a corner of a web page by default. Enable the Corner Insertion and make a decision on which corner is used to place the button. To disable button to scroll with page content, you are required to select Window option. Otherwise, the Document option should be selected.

The last step is to customize the horizontal length & vertical length between the button and vertical/horizontal corner edge.

Play & Pause Corner Position

Select a button responsive mode & set play/pause static position

Choose a responsive mode from three options, which is used to control the responsiveness of the play/pause button. Besides, the template tags and can be inserted into the header.php file to display play/pause button on the header of a web page.

If there is a need to insert the button or audio track title into the content of a page or post, the shortcode [soundy button] and [soundy title] can help you a lot. That allows you to display a button in the post/page instead of only placing it on a corner of the web page.

Override the Default Background Music on Certain Pages/Posts

Since the default settings make the web pages all in the same key, most of you may wish to override the default background music settings for certain pages and posts. Once activating this plugin, the setting mode “Soundy Background Music” appears on all pages/posts editing interface as below.

Soundy Background Music Settings Mode

Move to Soundtrack tab and check the option “Custom”. Choose an audio file from your media library and select a correct audio type. Customize the volume and title.

Custom Soundtrack

Move to the Play Options tab. If the default play options enable autoplay and audio repeat loop, leave the default options. If not, check “yes” to enable the two functions. The Short Codes tab includes two shortcodes, which allow you to insert play/pause button & soundtrack title to anywhere within the current post.

Play Options


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.