HTML5 Music Player With Playlist in Blogger

Wanna add music player with playlist in blogger here is the simple method to do it. you just need to put some code in blogger template and make some setting according to what you play. Its gone live on your blog. Here it is

Online Music Player

Hope can enrich your website or blog to ensure visitors entertainment, let them for a little while? Then do what others do. Add Network music player, creating today's most popular sites, playlist of any music or song theme.

You will find a free music player that you can use?

There are online resources currently available, this article can help reduce some good suggestions, can definitely make your search. check another top music player for mac

Try Dewplayer, flash MP3 player, it is completely free, even for commercial purposes, but not for resale. There are five different sizes of cool interface design.

For those less confident their programming skills, try a flash MP3 player application, it is very easy to install and use. This online music player, the standard playback controls, customization design, easy installation, automatic playlists, and can be resized.

Macromedia's Flash music player that can play MP3, up to 25 of your choice MP3 uninterrupted. Music can be automatically or manually play. Players can also use the HTML code to match your site customization. Here are some things you can use this player to do: define automatic start or manual start, internal decisions, external color plate color, custom buttons, change the background color of the player, and so on.

HTML5 Music Player in Blogger

• 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>

• Now Save Template
• Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript
• Add the following Code

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

Change the following things in the code

• title: Represents the title of your music or song. 
• mfile: It represents the music file in .mp3 extension 
• author: The name of the person who composed the music.
• cover: Cover thumb image that appears when the song is playing.
• background: The image that appears in the background of the music player.

This Gadget Look like This