A Cool Music Player for Blogger

There are many ways to add Music to your blog. The most common way is to embed it into your post.In this tutorial I will be using the Wordpress Music Player to do the same.

Note:You will be needing a Free Hosting Service like Dropbox to host the SWF file.

Also You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host.

Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to the Post/Page you want to add the WP Music Player.

3.Now copy the code from below and paste it in the Edit HTML Tab of the respective Post/Page.

<object data="http://dl.dropbox.com/u/27675057/player.swf" height="24" id="audioplayer1" type="application/x-shockwave-flash" width="290">  <param name="movie" value="http://dl.dropbox.com/u/27675057/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=URL of Music File">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="wmode" value="transparent">
</object>

4.For Adding multiple Players on a page just change the id in 2nd Line and the value in the in the 4th Line just as seen below

<object data="http://dl.dropbox.com/u/27675057/player.swf" height="24" id="audioplayer2" type="application/x-shockwave-flash" width="290">   
<param name="movie" value="http://dl.dropbox.com/u/27675057/player.swf">
<param name="FlashVars" value="playerID=2&amp;soundFile=http://dl.dropbox.com/u/27675057/Maid%20with%20the%20Flaxen%20Hair.mp3">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="wmode" value="transparent">
</object>

← This is the Second Player of this Page

5.Now for changing the appearnace of the code see the following code:

<object data="http://www.mdn.fm/files/87478_pfe4i/player1.swf" height="24" id="audioplayer3" type="application/x-shockwave-flash" width="290">   <param name="movie" value="http://www.mdn.fm/files/87478_pfe4i/player1.swf">
<param name="FlashVars" value="playerID=audioplayer3&amp;bg=0xf8f8f8&amp;leftbg=0xeeeeee&amp;lefticon=0x666666&amp;rightbg=0xcccccc&amp;rightbghover=0x999999&amp;righticon=0x666666&amp;righticonhover=0xffffff&amp;text=0x666666&amp;slider=0x666666&amp;track=0xFFFFFF&amp;border=0x666666&amp;loader=0x9FFFB8&amp;loop=no&amp;autostart=yes&amp;soundFile=http://dl.dropbox.com/u/27675057/DivBox/music.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

Amazed How the player is playing when the Page just loaded ,This is because I changed the parameter "autostart" to true. Thinking where this autostart Parameter is ??, Scroll to the Extreme Right of this page and You will find it there.(The above code has shifted a little right because no space has to given in the list of parameters)


There is also a loop parameter to play the track non-stop

The Following image will explain the parameters in a more detailed manner.

This Tutorial could not have been possible without MBT ,For more customized Players check out Here.

Just for Knowledge: Google has launched a Project called Google Swiffy whose purpose is to Convert SWF files into HTML5 ,so that even devices not supporting Flash can run those SWFs. I tried to convert the player.swf but it showed some error (The Project is in its early stages) .Check out the their Gallery of Converted items Here.

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox