Customized The Color of Word Press MP3 Player

B Share Wordpress Audio player is a beautiful mp3 player and thanks to Mindy McAdams we can now actually make it work in blogger and can even change the entire colour scheme of this mini player! I hope you already now how to make it work with blogger if not read this post –> Flash Mp3 Player

Today I will let you know how to change the colour scheme of both versions of these useful mp3 players. Before we may begin check my customized player below,

This tutorial again consists of two parts,

1. Adding the JavaScript Inside Blogger
2. Adding The HTML Code For Mp3 Player To Appear

I have already explained both these parts in my previous post but this time we will work only on the second part i.e Adding The HTML Code For Mp3 Player To Appear

The HTML Code for our simple Mp3 Players looks like this,

<object type="application/x-shockwave-flash" data=http://tutzone.fileave.com/player.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://tutzone.fileave.com/player.swf>
<param name="FlashVars" value="playerID=1&soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent"></object>

And The HTML Code For Our New Customized Mp3 Will look like this,


<object type="application/x-shockwave-flash" data=http://tutzone.fileave.com/player.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://tutzone.fileave.com/player.swf>
<param name="FlashVars" value="playerID=audioplayer1&
bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&
soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object&gt

The Green part is the portion responsible for the color scheme. View the image below to understand each code,

where,

rightbghover=0x999999& and righticonhover=0xffffff& refers to the color change on mouse hover. The red part in between the green text is the hexadecimal colour code. To change the colors according to your preferences use colour chart

Customization

This is the most important part and I want your full concentration here. You can observe that the green part is the main portion consisting of 12 options to change the color scheme of the Mp3 player. Once you have finalized all your colors using CSS Color Chart there is only one thing required to successfully dress up this player. You observe that the green portion of the code looks like this,

bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&


You need to align all this vertical code into a single line like this,

bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff&
text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&
loader=0x9FFFB8&loop=no&autostart=no&

Now your code will look like this,

<object type="application/x-shockwave-flash" data=http://tutzone.fileave.com/player.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://tutzone.fileave.com/player.swf>
<param name="FlashVars" value="playerID=audioplayer1&bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&autostart=soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>


Make sure you replace URL of your MP3 with the link of your Mp3 file. For example the URL for my Mp3 file looks like this,

Ali Maula (Remix) Mp3

Some Players With Different Flavors

Masked Red


<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mustafastc.fileave.com/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0xFF0000&lefticon=0xffffff&rightbg=0xFFCCCC&rightbghover=0xFF0000&righticon=0xffffff&righticonhover=0xffffff&text=0xFF0000&slider=0xffffff&track=0xFF0000&border=0xFF0000&loader=0xFF6666&loop=no&autostart=no&soundFile=URL Of Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>


Masked Purple


<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mustafastc.fileave.com/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x660033&lefticon=0xffffff&rightbg=0xC74988&rightbghover=0x660033&righticon=0xffffff&righticonhover=0xffffff&text=0x660033&slider=0xffffff&track=0x660033&border=0x660033&loader=0x660033&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>


Masked Black

<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mustafastc.fileave.com/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x000000&lefticon=0xffffff&rightbg=0xcccccc&rightbghover=0x999999& righticon=0xffffff&righticonhover=0xffffff&text=0x000000&slider=0x666666&track=0x000000&border=0x000000&loader=0xffffff&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Kindly Bookmark this Post using your favorite Bookmarking service: