Categories

Featured templates

JS Animated. How to add a background music using HTML

Lana Greene January 26, 2015
Rating: 4.3. From 3 votes.
Please wait...

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

JS Animated. How to add a background music using HTML

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:

    JS_-Animated.How_to_add_a_background_music_using_HTML_5--1
  2. Save changes in the file.

  3. Upload audio files to the website root folder:

    JS_-Animated.How_to_add_a_background_music_using_HTML_5--3
  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:

JS_-Animated.How_to_add_a_background_music_using_HTML_5--2

Feel free to check the detailed video tutorial below:

JS Animated. How to add a background music using HTML

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

This entry was posted in JS Animated tutorials and tagged background, HTML, music. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.