Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

New Responsive HTML5 Music player For blogger

On By // 22 comments
Advertisement
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:-

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 ;)

22 comments:

  1. Nice one. Will it slow the blog's loading time?

    ReplyDelete
    Replies
    1. No bro Absolutely not. It doesn't slow the Blog's load time. ;)

      Delete
  2. Stylish widget. I loved it :D

    Thanks a lot for this tutorial.

    But this only work with HTML5 template. And I got some request to you Chan deep.

    Can you make a tutorial how to change blogger template to HTML5? If it's so hard to make it HTML5.

    Just bypass my request. If the tutorial is easy just make it so everyone can learn =D

    ( Sorry for my bad English. I,m still learning. )

    ReplyDelete
    Replies
    1. Yes Dude It only works with the HTML5 template. Most of the template released by Blogtipsntricks was html5. so you can use that templates.

      Then sure buddy I'll try to make it as a tutorial ;)

      Delete
  3. Hats of to you brother.. This widget is boom in blogosphere. And its so easy to setup... Thankx For this great widget...

    ReplyDelete
  4. this one is Great. Does it support any other media files?

    ReplyDelete
  5. Hello Chan Deep ,

    I have already subscribed in BTNT But I Didn't Get Any Code That Will Be Used To Access Resources Page Please Mail Me On My ID : bishal204[At]gmail.com

    Regards :

    http://www.TheDigitCrunch.com

    ReplyDelete
  6. Is it possible to customize the player's size so that I can fit it in a blog's sidebar?

    ReplyDelete
  7. Also, will this work with the templates Blogger currently offers?

    ReplyDelete
  8. I have blog related to entertainment, music. I will use this player of that blog.

    ReplyDelete
  9. where can i host my files. i cant get dropbox to work :(

    please email me: itunesm4aus@gmail.com

    ReplyDelete
  10. Nice post, how can I enable autoplay on this so as my playlist would play automatically after loading the page.
    www.mapochitz.blogspot.com

    ReplyDelete
  11. how to include a volume bar on this player ? :]

    ReplyDelete
  12. I expected this, but why only one day (the next day had no sound again)

    ReplyDelete
  13. Awesome
    How do I stop or suspend the playing?
    Can you do the same for videos that will play old flash videos no longer supported by anyone?
    Great work
    Thanks you

    ReplyDelete
  14. How change background color of playlist and width of player

    ReplyDelete
  15. How add Download Option in Play list Please help me

    ReplyDelete
  16. Nice blog with awesome contents
    Please it is not working in my blog
    Here is d URL www.kamsoblog.blogspot.com

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep