Add HTML5 Mp3 Music Player To Your Blog

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="mybloggersworld.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

• Code to play Automatically

<audio controls autoplay="controls"><source src="mybloggersworld.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="mybloggersworld.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

 
    Note: Replace mybloggersworld.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.