How to play background music or sound to your 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.
1 <audio autoplay loop>
2 <source src="http://yourmp3-file-location.mp3"></source>
3 </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.
1 <audio controls autoplay loop>
2 <source src="…"></source>
3 </audio>
The audio player looks like..
Adding audio player in Blogger, Add background music in Blogger
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 <audio id=”player”controls autoplay loop> then add a CSS like this
1 #player {
2 width: 100%;
3 }​
That’s it! Hope that helped you to add background music to your blog.

Leave a Reply