Using The HTML5 Audio Tag To Add Background Music To Any Webpage

The HTML5 Audio Tag

The HLTM5 Audio Tag can be used to add background music to any website. The code provided in this tutorial will work on any platform. I will demonstrate the HTML5 Audio functionality right in this blog post.

As you can see in the lower left side of this page, there is a speaker icon on a white background. If you hover this icon the HTML5 audio player, playing the background music for this tutorial, is displayed.

HTML5 Audio Attributes We Will Use In This Tutorial

For the purpose of this tutorial we will want the HTML5 Audio tag to preload the song, we will also want it to displays the audio controls, autoplay and loop the audio.

So the audio tag we will use will look something like this:

<audio controls autoplay preload loop>
 ...
</audio>

Adding The Audio

We will add the audio track in both mp3 and ogg format so that we can get cross browser compatibility. Not all browsers support mp3 and not all browsers support ogg. But using them together we can cover all major browsers.

If you have your audio file in mp3 format i recommend using an open source tool like Audacity to convert the file to ogg format. So our code now looks like this:

<audio autoplay="" controls="" loop="" preload="">
 <source src="http://192.254.184.234/~tangh/01_admin_resources/Shimmer/ogg/Smile.ogg" type="audio/ogg"></source>
 <source src="http://192.254.184.234/~tangh/01_admin_resources/Shimmer/mp3/Smile.mp3" type="audio/mpeg"></source>
 Your browser does not support the audio element.
</audio>

Change the src to use your own files. I have used a song from the free Shimmer Album. We will also mention this "Your browser does not support the audio element" for browsers which are not up to date.

Get The Complete Code

If you want to get the exact same style used in this tutorial you can get the entire code below:

<style media="screen" type="text/css">
 #backgroundaudio {
  display: block;
  position: fixed;
  bottom: -43px;
  left: 5px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #backgroundaudio:hover {
  bottom: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #backgroundaudio audio {
  background: #ffffff;
  padding: 5px;
  display: table-cell;
  vertical-align: middle;
  height: 43px;
  z-index: 9998;
 }
 #backgroundaudio i {
  font-size: 40px;
  display: block;
  background: #ffffff;
  padding: 5px;
  width: 50px;
  float: none;
  margin-bottom: -1px;
  z-index: 9999;
 }
</style>
<div id="backgroundaudio">
 <i class="icon-volume-up"></i>
 <audio autoplay="" controls="" loop="" preload="">
  <source src="http://192.254.184.234/~tangh/01_admin_resources/Shimmer/ogg/Smile.ogg" type="audio/ogg"></source>
  <source src="http://192.254.184.234/~tangh/01_admin_resources/Shimmer/mp3/Smile.mp3" type="audio/mpeg"></source>
  Your browser does not support the audio element.
 </audio>
</div>

Please leave your questions and suggestions in the comments section below.