Adding music to the background of your website can be a great way to improve the user experience.
It can help create a more relaxing and enjoyable atmosphere for your visitors, which can lead to better conversions; however, care must be taken to choose the right music to get the best user experience.
As a general rule, to add music to the background of a website, you can use HTML code or a plugin widget. In addition, you should ensure that the music is correct for your audience, can be switched off if needed, and does not loop infinitely.
In this article, I will cover the key aspects of using background music on your website, including:
- How to add music to the background of a website
- How to pick the right background music for a website
- How to use background music on a website legally
How To Add Music In The Background Of A Website
There are a few different ways to add music to the background of a website, but the most common options are:
- Using HTML audio elements
- Using WordPress plugins
1. HTML Audio Elements
One way to add background music to your website is to use the HTML audio element, <audio>.
This method is great because it’s very simple and doesn’t require any special coding knowledge.
Just copy and paste the following code into the HTML editor of your web page:
<audio controls src="INSERT_YOUR_AUDIO_FILE.mp3"></audio>In the above code, you need to replace the text between the commas, INSERT_YOUR_AUDIO_FILE.mp3, with the location of your audio file.
For example, if the audio file is uploaded to your Media Library on WordPress, then it will have a unique FILE URL which you can add to the HTML code.
If you would like the music to auto-play, i.e. to start playing as soon as the webpage is loaded, you will need to add an extra piece of code as per the following:
<audio controls src="INSERT_YOUR_AUDIO_FILE.mp3" autoplay loop></audio>It is worth noting, however, that auto-play can be unreliable as it depends on the user browser.
In addition, auto-play can annoy website users. Landing on a webpage with music playing automatically without any indication of where it is coming from can create a bad user experience.
2. WordPress Plugins
Another way to add background music to your website is by using a WordPress plugin.
This is a great option for those who like to avoid HTML and coding.
There are many great plugins available that will allow you to add music to your site with just a few clicks.
The advantage of using a WordPress plugin is that you can find some awesome music players that you can easily customise.
Here is a list of some common WordPress Plugins that allow music to be placed onto a website.
| WordPress Plugin | Where To Find |
|---|---|
| Audio Album by Cubecolour | View on WordPress.org |
| MP3 Audio Player by Sonaar | View Sonaar Music |
| Music Player for WooCommerce | View on WordPress.org |
| Modern Audio Player WordPress Plugin | View on CodeCanyon.net |
| ZoomSounds WordPress Wave Audio Player | View on CodeCanyon.net |
There are many more free WordPress plugins available that will help you add music to the background of your site.
To be sure you are getting a WordPress plugin that is reliable, check the plugin description and ensure that it meets the following criteria:
- Is widely used with lots of existing installs.
- Regularly updated.
For example, the following image shows the MP3 player plugin from Sonaar Music. We can see that there are more than 10,000 active installs and it was last updated only two weeks ago, so this tells us this MP3 player plugin should be reliable.
How To Pick The Right Background Music For A Website
When it comes to choosing the right background music for your website, there are a few things you need to consider.
1. Pick Subtle Background Music
Like all good background music, it should stay in the background and contribute to the mood and atmosphere of your website without your website visitor noticing.
2. Match The Music Genre To Your Product Or Service
Every product and service online will have a genre of background music that works best for that product or service.
For example, if your website is a Yoga or wellness site, choose music that is meditation music or if your website promotes Celtic heritage or travel to Ireland, consider some Celtic and Irish music.
3. Pick Music That Is Consistent In Tone, Dynamics or Loudness
In order for background music to be effective, it should stay in the background and not distract your website visitor.
To do this successfully, the music should be uniform in tone, with no dramatic changes in volume.
Consider a venue such as a health spa or health farm retreat. Often these venues will have very low, calming background music playing all day. The venue wants you to stay in a calm and steady-state and the relaxing background music is essential to this.
This music will be uniform in tone and will not change volume dramatically to keep the customers in a hypnotic and calm state.
This use of spa and relaxation music is a great example of choosing background music that is uniform and does not vary too much in loudness or dynamics.
4. Avoid Short Loops
When choosing music for your website, ensure you use music that is long enough to cover the average time a visitor stays on your site without repeating
Hearing music on repeat can be very annoying and distracting for website visitors,
For example, if a visitor stays on your website for 3 minutes and you are using background music that is just a short 30-second loop, after 3 minutes that website visitor will have heard that piece of music 6 times.
This will not enhance the user experience as hoped but only detract from it.
5. Give Your Visitor Control
When embedding music on your website, ensure you place the music volume control in clear view so that your visitor can turn off the music if they wish.
They may be at work, in a quiet space, or at home. Either way, you don’t know what environment they are in and it may not be suitable to have music playing.
In addition, some visitors will only want to focus on reading your website text. Many people want to give their attention to the words and therefore like the option to turn the background music off.
6. Test Your Background Music
Just like using different text on your website to test how well website visitors engage with your content, testing your background music can be very effective.
Major and successful brands will refine and test their music to ensure that it gives the best response from their customers.
How To Legally Use Background Music On A Website
To ensure the smooth and legal running of your website, you will need to ensure your background music is properly licensed for website use.
As a general rule, royalty free music is one of the best options when licensing music to use on your own website. Typically, royalty free music is the simplest music licence, as there are no further fees involved.
If you do not choose music that is licenced as royalty free music or from a music library that can easily grant you a music license to use music on your website, then you will need to check with the PPL / PRS to see what type of license your chosen music requires.
PPL / PRS is based in the United Kingdom. If you are licensing music in the United States, the ASCAP body can be contacted. However, all these collection bodies are partners and all work together to govern music license and royalty collection around the world. If you contact one, they should connect you with the right agency for your area.
Once you start looking at these agencies and the fees involved, you can see why royalty free music has become so popular as it by-passes these royalty collection societies.
Whatever music you end up choosing to embed on your website, it is essential that the music comes with a license to allow you to embed it on your site. All good professional music libraries will provide you with a written music license that will detail what the music can be used for.
If in doubt, do not take the risk. Ask your music provider to clarify that you can use the music as background music on your website, and ideally get this in writing.
Final Thoughts
Adding music to the background of your website can be a great way to improve the user experience and create a more relaxing and enjoyable atmosphere for your visitors.
If embedding music on your website, ensure that it is non-intrusive and sits in the background to add ambience and enhance your website visitor experience.
If possible, always give your website visitor control over the music volume on your website. Ensure that the option to turn the music off is always visible.
When using music, it is important that you get the right permission to use the music on your website.
I have found that the best music license to choose when selecting music to host on your website is royalty free music from a trust music library as it is the simplest and fastest way to get safe to use music for your business.