How to add background music to your Blogger

We have posted an article about embedding SoundCloud sounds in Blogger and after reading that, few folks asked us about adding background music to their blogs that is without showing any player controls to their visitors. You might have noticed in some blogs that once when you land on it some music suddenly starts to play. It may be pleasant or annoying; whatever it is they add it to grab their visitor’s attention. How about you would you like to add a nice instrumental music to your blog background? It’s simple, here we will see how to add background music or sound to Blogger blog.

There are many ways to add background music to your blog but here we will show you the easy one. By using <audio> tag you can embed a music player with visible controls; make a sound to play at once when the website loads and add a background music that plays endlessly with controls hidden. Alright, let’s see how to do this.

How to add background music or sound to Blogger blog

First before adding background music to your blog you must have a music file to call in. Just in Google, search for royalty free music’s and you will see many sites offering free music downloads. Select any suitable background music for your blog or if you have already got one, then just upload it to any online storage sites there are hundreds of best free file hosting servers. Hope your music file is ready; now move on to Blogger part.

Login to your Blogger blog and then choose the blog where you wish to add your background music. Next go to Layout, choose “add a gadget”, select HTML/JavaScript gadget and then add the below line

<audio autoplay loop>

<source src="http://yourmp3-file-location.mp3">

</source></audio>

Now in source src=”” add your music file location, save the gadget and then view your blog where you can hear the music playing, but the controls are hidden. In the above code “autoplay” starts to play the sound as soon as it is ready and “loop” will make the audio to repeat every time when it is finished.

If you would like to show audio controls for your visitors then just add controls inside the audio tag just like this.

<audio controls autoplay loop>.

<source src=”…”></source>

</audio>

The audio player looks like.

If you wish to add a music player or make music to play in just single post or page, then you can add it only in that particular page. The audio player control doesn’t fits your blog sidebar, say you want to increase the player width. To do so add an id inside the tag like this <audioid=”player” controls autoplay loop> then add a CSS like this

#player {
width: 100%;

}

That’s it! Hope that helped you to add background music to your blog.

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.