How to Add a HTML5 Music Player with Playlist in Blogger

Socialize It →

Tweet

30

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

About the Editorial Team

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