New Responsive HTML5 Music player For blogger

Hi Friends Today We are going to See how to add Responsive HTML5 Music player to our blogger blog. Generally HTML5 mp3/audio players requires Two type of files which is .mp3 and .ogg format. But In blogger we cant host files so we have to host our files in a external hosting like Dropbox which is a limited storage. In this case When we upload two types of music files (.mp3, .ogg) it consumes more space. So, To solve this problem I developed this New HTML5 Music player widget for blogger. In this widget We need only mp3 format to run this widget. so we can save lots of space. ok Let's see the advantages of using this music player.

Advantages of HTML5 Music player for blogger

• Easy to install
• It does not affect the page loading speed
• It require only one format(.mp3) of music file while other HTML5 player require two type of files (.mp3, .ogg)
• It's responsive. We can use it in any devices ;)
• And Much More...

OK Now let's see the live demo for better understanding. :)

Live Demo:-

HTML5 Music player: Playlist Demo

1. Neeyenna Periya Appatakkara
2. Shut Up Your Mouth
3. Muttalai Muttalai
4. Mosale Mosale
5. Pudhiya Ulagai
6. Muttalai Muttalai (Instrumental)
7. Neeyenna Periya (Karaoke)
8. Pudhiya Ulagai (Karaoke)

HTML5 Music player: Single File Demo

How to add this HTML5 Music player to your blog?

Adding the Music player Script to your blog

To add the Widget to your blog Follow the steps given below.

1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Check/Tick the Expand Template Widgets checkbox
4. Now Search for </head>
5. Add the below snippet code before </head>
   

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
   <script src="http://dl.dropboxusercontent.com/s/fxqls1drerhbou6/audio.min.js" type="text/javascript"></script>
   

   If your blog already have a jQuery Plugin then remove the highlighted code.
6. Now save your Template.

Displaying HTML5 Music player on your blog

We had added the HTML5 Music player script to your blog. After that Now We have to display the widget.

Displaying the Music player is very simple. Let see how to make it. ;)

Before Displaying it We have to know that we can use this Music player widget in two types

1. By Adding it as a Playlist
2. By Adding it as a single music file

Adding HTML5 Music player as a playlist

To add the Music player widget just paste The following code where you want to Display the playlist.

<div class="btnt-player">
<div class="btnt-player-inner nano">
<div class="content">
<ol>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
</ol>
</div>
</div>
<div style="clear: both;">
</div>
<audio preload="preload"></audio></div>

• After Adding the above code Replace YOUR-MUSIC-FILE-LINK with your music file link
  note:- You can host you music files in Dropbox
• Then Replace MUSIC FILE NAME with the Name of the Music File

That's all Now you have done. OK Now let's see how to add a single music file using the player

Adding single Music file in HTML5 Music player

If you want To add the single Music file in the Music player, Paste The following code where you want to Display the Player.

<audio preload="auto" src="YOUR-MUSIC-FILE-LINK"></audio>

• After Adding the above code Replace YOUR-MUSIC-FILE-LINK with your music file link

I Hope you all like this widget Kindly Let me know your thoughts about the widget and don't forget to share it...

Thanks Buddies ;)