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

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

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

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

Post a Comment

THANK! YOU! This is probably the most comprehensive, detailed (yet non-waffling) guide on how to do this. I've tried SOOOOOOOOO many who've promised a "how to". But all I got was "crap crap crap crap...blah blah blah...now copy the code". And I was beginning to feel really dumb! But, as you've shown, I actually can't believe how simple it is! Thanx again!

Is there a code which can be used to change the track name on the player so that it doesn't just say "track 1"?
Thank you in advance.

Unknown said...

can we use google drive for storage

As of now Google Drive does not provide any way to share direct links or public links. They might roll out these features in the coming months .

As of now you can't use Google Drive for hosting Music

Unknown said...

very very very thanks for share this code.Very thanks a lot

Zahhar said...

This works great for every browser EXCEPT IE. In IE I see nothing. Everywhere else the player works fine.