How to Add Background Music to Your Wix Site

Assume you are a musician. And you want your visitors to taste your best music. You select your best song and play that song on the background of your site.

Or you want to add a happy vibe to your adventurous stories.You play background music while your fans are reading your blog posts.

Background music has many benefits. And if you decide to have one for your site, I can help.

Add background soundtrack to your Wix site

The first goal is to upload to your Wix site the soundtrack which you want to make into background music. Follow the steps below:

  1. Click the “Add” icon on the left menu
  2. Click “Music” on the blue-background list
  3. Click “Play” icon under Themed Players
  4. Click “+ Upload Media”
  5. Click “Upload from Computer”
  6. Select the mp3 sound file. Then wait until upload complete
  7. Click “Add to Page”

Click “Add” icon -> Click Music -> Click “Play” icon under Themed Players

Click “+ Upload Media”

Click “Upload from Computer”

Wait Until Upload Complete -> Click “Add to Page”

Background MusicSettings

Now your background music is ready. The next goal is to change some settings in your music player so that your music becomes background music. Those settings are loudness, looping, and auto-play. 

Background Music Settings

How loud do you wantthe background music to be?

There is no straight black-and-white answer. It depends onthe purpose of your website.

For example, imagine you are a rock singer. You want to showcaseyour best track on the website background. Your rock music fan would not enjoyyour music if you set the volume too low.

On the other hand, you are into relaxing music. You cannever create a warm and calm atmosphere by setting the music too loud.

The bottom line is: You use a loud setting when you want your site visitors paying attention to the music. When background music isn’t the main focus, the low-volume setting is appropriate.

Drag the “Dot” to the left to lower the volume

Drag the “Dot” to the right to make your music louder.

Do you want the musicto be played in a loop?

It depends.

From my experience, the visitors’ attention fades away with every replay. After a few replays, they don’t care. Even worse they may get annoyed.

You don’t want that. Instead, you stop the music after 30 seconds so that your visitors want to hear more.

However, you can play background music in a loop when you know the music is not that important. The music is there just to create an atmosphere.

Switch on the setting to play in a loop

Switch off the setting when you don’t want looping

Do you want the musicto be auto-played on loading?

I recommend not to switch on auto-played on loading.

The auto-played function only works on laptop and desktopcomputers. It doesn’t work on mobile devices. Majority of your visitors will beon mobile devices anyways.

There is a good reason for that. Your mobile internet browsers use your data plan to download the background music before it is auto-played. And data costs money.

Therefore, Apple and Android don’t want to start downloadingthe music until you press on the play button.

If you still want to enable auto-played, switch on the setting

More useful tricks

The fun doesn’t stop there. I will show you how to set up background music for the entire website. Or you can set up different background music for each web page. Very cool!

Steps to playbackground music for the entire website:

  1. Add background music to your Wix site
  2. Drag the background music icon to the footer area borderline
  3. Click “Move To Footer”

Move “Music Player” to the Footer area to play music for the entire website

Steps to play background music for a webpage only:

  1. Add background music to your Wix site
  2. Drag the background music icon on the webpagebody*

Above header line is NOT the body

Below footer line is NOT the body

Hide background musicicon

A few clients of mine complained the “Play” icon was ugly. And they did not allow the site visitors to control the background music on demand.

If you want the same thing, you can hide the background music icon. You hide it behind other elements like pictures, menu.

But I advise you to be cautious. Because when your background music doesn’t auto-play on mobile devices, your visitors need a “Play” button to turn it on. They won’t find that button when you hide it.

Steps to hidebackground music icon

  1. Place “Play” icon on top of an element (Menu, Picture, etc…)
  2. Click the “Arrange” icon
  3. Click “Send to back” icon to hide the “Play” icon behind the element

Click the “Arrange” icon

“Send to back” the player element

Conclusion

That’s it! You have a complete tutorial on how to add background music to your Wix website. Give it a try to make your website great. Let me know in the comment section if you have any problem. Happy to help!

Tech Wizard

Passionate full-time web designer and programmer. Find beauty in simplicity and efficiency.