Add HTML5 Mp3 Music Player To Your Blog

Isn't it be cool to have a tune played when someone visit your websites or blog. Specially if your blog is about songs, music, movies and videos then it would be cool to play music automatically when visitors visits your websites. In this tutorial i will show you how to add a HTML5 mp3 music player to your blog. This mp3 player comes with features such as adjusting volume, play and pause button etc. It works on mostly all browsers except some lower version of internet explorer.

Live Demo (Check Below)

How to add HTML5 Mp3 Player ?

1. Go to blogger Dashboard > Layout
2. Then Click on Add Gadget
3. Select HTML/Javascript
4. Copy the below code and Save it. (Any one of 3)

• Code For Normal Mp3 Player

<audio controls="controls"><source src="msapcw0rld.blogspot.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

• Code to play Automatically

<audio controls autoplay="controls"><source src="msapcw0rld.blogspot.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

• Code to play music again and again (Looping)

<audio controls loop="controls"><source src="msapcw0rld.blogspot.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Note: Replace msapcw0rld.blogspot.com with url of mp3 file you want to play. The url will end with .mp3

5. Now you have working HTML5 Mp3 player on your blog.
6. Place this widget where you want it to appear on your blog.


Have any question ?
If you have any problem implementing HTML5 Mp3 player to your blog or have any other question or suggestion then leave a comment below. I will be glad to help you. Don't Forget to subscribe, +1 on google+ and like us on Facebook.

Source