Ads 468x60px

Sunday, August 7, 2011

how to Customize The Color Scheme Of Wordpress Mp3 Flash Player


wordpress mp3 playerWordpress 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!
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,
http://www.mdn.fm/files/87478_pfe4i/player1.swf id="audioplayer1" height="24" width="290">
http://www.mdn.fm/files/87478_pfe4i/player1.swf>
URL of your MP3">





And The HTML Code For Our New Customized Mp3 Will look like this,
http://www.mdn.fm/files/87478_pfe4i/player1.swf id="audioplayer1" height="24" width="290">
http://www.mdn.fm/files/87478_pfe4i/player1.swf>
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">




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

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 our 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 our 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,
http://www.mdn.fm/files/87478_pfe4i/player1.swf id="audioplayer1" height="24" width="290">
http://www.mdn.fm/files/87478_pfe4i/player1.swf>
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">



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,
http://stcmustafa.fileave.com/lastbreath.mp3

Some Players With Different Flavors

Masked Red

The code for this player is shared below,
Masked Purple
The code for this player is shared below,

Masked Black

The code for this player is shared below,
And the code for the first Mp3 player used in this post as Green and Blue is shared below,

The players that you see above are the first version and if you want to use the second version then simply replace http://www.mdn.fm/files/87478_pfe4i/player1.swf withhttp://www.mdn.fm/files/87479_wv3lp/player.swf A second version Player will look like this,

No comments:

Post a Comment