JS Animated. How to add a background music using HTML

This tutorial shows how to add a background music using HTML 5.

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.

In this tutorial we will add the HTML5 Audio tag to preload the song and to display the audio controls, autoplay and loop.

The audio tag code will look like the following:

<audio controls autoplay preload loop>
  ...
</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, we recommend using an open source tool like Audacity to convert the file to ogg format. So, our code now looks like this:

Change the src to use your own files.

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

<!--background audio--> 
  <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="fa fa-volume-up"></i> 
	  <audio autoplay="" controls="" loop="" preload=""> 
		  <source src="your_website_url/Sunrise.ogg" type="audio/ogg"></source> 
		  <source src="your_website_url/Sunrise.mp3" type="audio/mpeg"></source> 
		  Your browser does not support the audio element. 
	  </audio> 
  </div>

In order to add the code, you should do the following:

1. Open html file to edit and paste the code to the desired location in the file:

   

2. Save changes in the file.

3. Upload audio files to the website root folder:

   

4. Make sure to update the paths to your audio files in the code you have copied:

   <source src="your_website_url/Sunrise.ogg" type="audio/ogg"></source> 
   <source src="your_website_url/Sunrise.mp3" type="audio/mpeg"></source> 
   	

Now the background audio is on your web page:

Feel free to check the detailed video tutorial below:

In case you are looking for beautiful wordpress themes music selection, feel free to observe them now!