How to set a background music on a web page?

By Faruque Ahamed Mollick

We have already noticed while visiting some of the web pages we can listen to a background music. How can it be done? How can we also set a background music for a web page?

In this tutorial, we are going to see how to set a background music for a web page.

Adding background music on a web page is quite simple. To add a background audio on a web page we are here going to use the HTML5 audio that uses the audio tag. But here we will not use the audio controls so that our audio player will be hidden. Also, we are going to use the hidden attribute to be sure that the audio player is hidden.

Locate the Geo-position of a visitor in JavaScript

Show live preview of HTML textarea with JavaScript

Making the audio player hidden will make the web page feels like the background music of the web page. Below is the HTML code that will be a background music player of the web page:

<audio autoplay loop hidden>
  <source src="demo.mp3" type="audio/mpeg">
</audio>

In the above code, we have set autoplay so that the background audio will play immediately. Also using the loop attribute will play the music again and again after its end.

Another method of adding background music on a web page is by using the embed tag. This method will be supported by all versions of Netscape, as well as Internet Explorer (“IE”) 3.0 and above. below is the code:



<embed width="0" height="0" src="demo.mp3" autostart="true" loop="true">
</embed>

In the above code, we have set the height and width to “0” to make it hidden.

Live word counter from HTML textarea in JavaScript

So we have seen that it is really so easy to add a background audio on any web page. It just needs few lines of HTML code and nothing is complicated here.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *