How to Add a HTML5 Music Player with Playlist in Blogger

Advertisements
In the past, we have already showed you how you can add Flash MP3 players in your Blogger Blog but since different browsers have different configurations. Therefore, most of the browsers do not supports flash, and this causes some mighty headaches especially when you are running a website totally based on music. Recently, one of reader asked us that How to Add HTML5 Music Player with Playlist in Blogger? Music players are deliberated as the main source of attraction for some common users. Therefore, today in this article, we will show you how to add HTML5 Music Player with Playlist in Blogger.

Installing HTML5 Music Player in Blogger:

The first thing you should do is to Login into your Blogger Dashboard through your Google account. After logging into your account, from the list of your blogs, select that blog on which you want to install HTML5 Music Player. Now go to Template >> Edit HTML and search for the ending </head> Tag. After finding the tag, just above it paste the following code.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>

<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

Once the whole thing is done, it is the period to save your template. Just press the “Save Template” button situated on the top right corner of your monitor screen. Now move to the next step ahead.

Adding HTML 5 Music Player in Blogger:

The next thing is to add the HTML5 music player either in your sidebar or into specific page/posts on your site. This entirely depends on your needs, whether you want it into your sidebar, posts, pages or anywhere else. It would work perfectly well everywhere. Follow the following instructions properly.

Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and just paste the following code into the HTML Text Box. Now you probably want to customize your Music player so before we save the gadget lets learn how you can customize it. For example, Changing, Music, Covers and etc.

<div class="mbl">
<div class="mbl_player" id="mnplp">
<div class="mbl_art_bg"></div>
<img class="mbl_cover" src="" alt=""/>
<span class="mnpl_title"></span>
<span class="mnpl_author"></span>

<div class="mnpl_volume_min"></div>
<div class="mnpl_volume"></div>
<div class="mbl_volume_max"></div>

<div class="mnpl_toolbar">
<div class="mnpl_tlb_prev"></div>
<div class="mnpl_tlb_stop"></div>
<div class="mnpl_tlb_next"></div>
<div class="mnpl_current"></div>
<div class="mnpl_long"></div>
<div class="mnpl_all"></div>
</div>

<div class="mbl_playlist">
</div>
</div>
</div>

<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
]
});
});
</script>

Customization:

  1. title: Represents the title of your music or song. 
  2. mfile: It represents the music file in .mp3 extension 
  3. author: The name of the person who composed the music.
  4. cover: Cover thumb image that appears when the song is playing.
  5. background: The image that appears in the background of the music player.
Congratulations: After customizing, press "Save" button located at the bottom of the window. Now, go and check your site. I am pretty sure your site would rock now. Let us know about your thoughts on this amazing gadget.

We expect that you have adored and learned how to add HTML5 Music Player with Playlist in Blogger. This gadget is tremendously robust and takes second to load, so it is understandable that it would not affect your site speed at all. Let us know what you think about it.

Note: This widget won't work until you will customize it. so, make sure you correct customize it according to the instructions we have mentioned above. 


Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

23 comments

June 20, 2013 at 6:58 PM

Good one Bro :)

June 20, 2013 at 8:24 PM

Hey Bro !! :)
Can I Ask You One Question ? :)
Plss Reply

June 20, 2013 at 10:01 PM

oh wao great design faizan, awesom work, is it responsive or not. looking great dear.

June 22, 2013 at 6:43 AM

It's really a cool widget for blogger. Helpful for music related blogs. Keep it up Syed bro :D

July 5, 2013 at 2:01 AM

That nice brother but not work with firefox not play music
but in crome browser nice play

July 5, 2013 at 3:39 AM

can you help to fix with firefox brother

July 8, 2013 at 5:26 AM

HI this Siddhu I added this in my blog,player is visible but playlist is empty,i had added three songs in that ,can you help me ,thanks in advance

Editorial Team MOD
July 8, 2013 at 2:00 PM

Your Blog URL?

id
July 17, 2013 at 2:31 AM

its nic but can u tell me where i can upload musics for using this wedget plz rply soon

Editorial Team MOD
July 17, 2013 at 7:51 AM

You can use Dropbox to host your music files or etc

id
July 18, 2013 at 4:55 AM

thanks for ur support plz i am getting 1 problem plz can u resolve i am giving u link of 1 image plz

https://docs.google.com/file/d/0BwIlXPwQTB7gWDU3eVkyZnpjMU0/edit?usp=sharing
if u can send me email at than
admin@ultimate-pages.com
and my website is www.ultimate-pages.com

Editorial Team MOD
July 18, 2013 at 4:25 PM

Sorry we can only answer Blogger related questions.

July 29, 2013 at 12:10 PM

Hello! Thanks so much for this.
I was wondering if you could help me with the mfile part.
How do you get the mp3 link for that?

Editorial Team MOD
July 31, 2013 at 4:14 PM

You can use Dropbox to host your music files or etc

August 6, 2013 at 12:25 PM

where else can i host im trying to do it but not working please help

my blog url: sampletest01.tk

August 6, 2013 at 11:26 PM

hi bro can we play more albums by using this player and also i want to display the list of albums avaliable.

August 9, 2013 at 4:05 PM

Great code, thanks!

I would like to add the album title. Would this require changes in the script or is it all html and css to fix that?

And I found some problems. All browsers are of latest version.

1. I added this to my blogger page but in Safari it will only play the selected track and then it stops. But your demo is playing the next song. I then tried with mobile Safari in iOS6 this works. Strange.

Then I tried with Chrome and it is playing the next song in the list but now it is not playing the songs to the end. There is a sudden stop at the end of the song and then it starts playing the next song.

2. If I skip forward in a song the volume icon appears in the play bar. This can be seen in your example here too. Look at the arrow here: http://s23.postimg.org/kt8pfhwaj/bug.jpg

3. The player is not working in Firefox. I have no Explorer 9 or 10 here to test with but maybe you could comment on expected behavior for these browsers.

August 30, 2013 at 5:38 AM

The Player is working fine but it stops and hang the slider at the header ...plss suggest me any solution thanks

August 30, 2013 at 3:26 PM

Great bro but can u tell me how to change its width and hight plzzzz..

September 30, 2013 at 9:00 AM

Hi my brother does not work on Firefox you solve

November 3, 2013 at 2:43 PM

Hi, the script has stopped working. on my site and on yours as well. I think I might has something to with not being able to access to this file: "https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" anymore.

Result:

"403. That’s an error. We're sorry, but you do not have access to this page. That’s all we know."

Could you fix it or provide me that missing file I'll host it on my server.

thanks

Editorial Team MOD
November 4, 2013 at 1:08 AM

That was a issue from Google Drive, which seem it is resolve'd now

December 10, 2013 at 3:54 AM

dear ali, the player not working in firefox, please fix it, i need to run my quran mp3 in my blog please help me, and it working fine in safari-----please replay me

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.