How To Add Background Music In HTML (Very Simple Examples)

Welcome to a short tutorial on how to add background music in HTML.

The fastest way to add background music to a website is to insert an audio tag at the bottom of the page – <audio src="MUSIC.mp3" autoplay loop></audio>.

Yep, it’s that simple, but there are still a couple of things to take note of – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

Download & Notes	Audio Mechanics	Useful Bits & Links
The End

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

AUDIO MECHANICS

All right, let us now get into more details on the mechanics of the audio background music.

1) BACKGROUND MUSIC EXAMPLE

1-background-music.html

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Background Music</title>
  </head>
  <body>
    <p>Contents here as usual.</p>

    <!-- BACKGROUND MUSIC -->
    <audio src="Clair de Lune.mp3" autoplay loop></audio>
  </body>
</html>

Once upon a time, in the Stone Age of the Internet, we have to use all sorts of funny plugins to play audio. But yep, it’s really that simple now, no rocket science required.

Just use the <audio> tag, but try to place it near to the bottom of the page – So that the audio loads last and users don’t have to stare at an empty page for long; Let the text and images load first.
The autoplay property should be self-explanatory – Automatically start playing when the audio file is loaded.
The loop property as well… Automatically loop when the audio has ended.

2) PLAYING MULTIPLE SONGS

2-many.html

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

Sadly, there is no quick-and-dirty way to create a playlist in HTML. A little bit of Javascript is required in this case:

The usual <audio> tag with slightly different properties – Here, we set it to autoplay only, and give it an id.
In the Javascript, we get the HTML <audio> tag, and define a playlist.
When the current song has ended, we simply play the next one; When there are no more songs in the playlist, we loop back to the first song.

SUPPORTED FILE FORMATS

The above examples only used the widely supported mp3 file format, but please take note it is also OK to use the many other audio file formats – wav, ogg, webm, flac. But the support of each file format varies from browser to browser – Check out this table on Wikipedia on the supported audio coding formats.

AUTOPLAY IS NOT REALLY RELIABLE

Nope, please don’t get me wrong. The HTML <audio> tag is widely supported in all modern browsers, and it should play just fine so long as the user is on a WIFI connection… Meaning, the problem comes when users are on mobile devices or slow/unstable connection.

Every browser will deal with autoplay differently – If the user is on a mobile device, the autoplay will most likely be ignored and not play. Also, users can set the browser to ignore autoplay totally.

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

A NOTE ABOUT <EMBED> & <BGSOUND>

If you have been poking around the Internet, you might spot some tutorials using <embed> and <bgsound>. Please do not use those anymore – They are deprecated and outdated. Stick with the modern <audio> instead.

BACKGROUND MUSIC – NOT A GOOD IDEA?

Congratulations on finishing this tutorial… But after all of the basics, I will not recommend putting any form of background music. Why?

Audio files will slow down the loading of the website.
It is not really reliable in any case… It can be totally ignored by the browsers, or by the user’s setting.
Intrusive. Imagine being in a quiet office or library, and the page suddenly plays loud music.
Annoying. The user is listening to something else, and the background music on the page just crosses over.

So yep, not a good idea. Just don’t include any background music, unless it is absolutely required for a good reason.

LINKS & REFERENCES

<audio>: The Embed Audio element – MDN

INFOGRAPHIC CHEAT SHEET

How To Add Background Music in HTML (click to enlarge)

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

TABLE OF CONTENTS