Customize The Color Scheme Of Wordpress Mp3 Flash Player

wordpress mp3 player 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://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.googlecode.com/files/player1.swf>
<param name="FlashVars" value="playerID=1&amp;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://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.googlecode.com/files/player1.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>

 

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,

<object type="application/x-shockwave-flash" data=http://mybloggertricks.googlecode.com/files/player1.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://mybloggertricks.googlecode.com/files/player1.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>

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,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/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

The code for this player is shared below,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/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

The code for this player is shared below,

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/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>

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

<object type="application/x-shockwave-flash" data="http://mybloggertricks.googlecode.com/files/player1.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mybloggertricks.googlecode.com/files/player1.swf"> <param name="FlashVars" value="playerID=1&bg=0xffffff&lefticon=0xffffff&rightbg=0x0080ff&rightbghover=0x289728&righticon=0xffffff&leftbg=0x289728&righticonhover=0xffffff&text=0x0080ff&slider=0xffffff&track=0xffffff&border=0x289728&loader=0x0080ff&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>

I hope you like them. For Using more than one player as I have done read my previous post on Wordpress Mp3 Player

The players that you see above are the first version and if you want to use the second version then simply replace http://mybloggertricks.googlecode.com/files/player1.swf with http://mybloggertricks.googlecode.com/files/player1.swf  A second version Player will look like this,

I hope you will like this post :>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

45 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. you can play with the code using the MBT HTML Editor.

    Paste the code below inside MBT HTML Editor to start playing! Click here to open The HTML Editor


    <script language="JavaScript" src="http://mustafastc.fileave.com/audio-player-2.js"></script>






    <object type="application/x-shockwave-flash" data="http://mustafastc.fileave.com/player1.swf" id="audioplayer1" height="24" width="290">
    <param name="movie" value="http://mustafastc.fileave.com/player1.swf">
    <param name="FlashVars" value="playerID=1&bg=0xffffff&lefticon=0xffffff&rightbg=0x0080ff&rightbghover=0x289728&righticon=0xffffff&leftbg=0x289728&righticonhover=0xffffff&text=0x0080ff&slider=0xffffff&track=0xffffff&border=0x289728&loader=0x0080ff&loop=no&autostart=no&soundFile=http://mustafastc.fileave.com/Clint_Mansell-Requiem_for_a_Dream_undefinedremix)-www.mrtzcmp3.net.mp3">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="wmode" value="transparent">
    </object>

    ReplyDelete
  2. hi mohd nice tricks
    i have one problem not with your this tricks related to my blog when i post something on blogger it shows blank space about it please visit my blog and suggest how to improve my blog

    ReplyDelete
  3. opss i forgoe to give you my add:www.bcsexamguru.blgspot.com

    ReplyDelete
  4. Hi man! Nice trick! I really like your blog. I aplied this player to my site www.arhivaflstudio.blogspot.com, I customized it and I am very pleased of result. Previously I had same player, but not custom coloured, but the server I hosted the files crashed and I lost all data. I never knew I can use this player without js player. Thank you, and please visit my site and tell me what you think about layout etc, it is all made by me starting with Minima template. Thanx!

    ReplyDelete
  5. Hey! I want to add a link of your site to my site. Give me a code or something, please.

    ReplyDelete
  6. @nil

    I really don't see any blank space. Clear your cache may be it would help. It looks fine on my browser


    @lucky Flaush

    I am glad you now have a custom player :>
    Thanks for adding MBT blog to yours. You are most welcome to link to us using this code,
    MY Blogger Tricks

    ReplyDelete
  7. will u try make me the template of the following URL
    black-pink-blogger.blogspot.com

    please i am begging u pleaseeeeeeeeeee

    ReplyDelete
  8. I voted on BCA, added you as friend on Facebook, I followed you and I placed a link of your site on mine. You deserve all these, you're making a good job. I will stay tuned!
    Cheers

    ReplyDelete
  9. @chinna

    I never make templates randomly and willingly :D
    I am sorry but I am a student after all!

    @Lucky Flaush

    It's nice of to have embraced me with so much love. thanks for that.
    In my previous comment I forgot to encode the code. Here is the code,
    <a href="http://www.mybloggertricks.com">My Blogger Tricks</a>
    Thanks again

    ReplyDelete
  10. Peace Mohammad. Thanks for all your help with the WP player for blogger. You've been a great help. 1 thing I'm concerned w/is the player continues to buffer when viewed in IE. On Firefox and Safari, it works well. I have my music hosted at Google sites. is there something I can do to correct the buffering in IE.

    ReplyDelete
  11. @MR wells

    Peace to you too friend. Its great you find the post helpful.
    As far as buffering is concerned I had the same problem with google sites but when I hosted my files at fileave.com things really changed.

    Do one thing:
    View this post in IE and see if my players are buffering or not. If they didn't then fileave.com is the right option. You can also host your files at boxstr.com

    ReplyDelete
  12. A few did buffer, but not for as long as mine did in IE. I will try the two hosting sites you recommend. Thank you again.

    Salaam

    ReplyDelete
  13. Mohammad, do you know how to manipulate the Add This Button html so that the button displays on the right side of the post vs the left. see my blog www.mysoullessons.blogspot.com to know what I mean.

    ReplyDelete
  14. @Mr Wells

    To align the button to right follow these steps,

    1. Find Add This Button code inside your template which will look like this,
    <!-- AddThis Button BEGIN -->
    <div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4b05655b02501096"></script></div>
    <!-- AddThis Button END -->

    2. Add align="right" to the above code just like this,

    <!-- AddThis Button BEGIN -->
    <div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img align="right" src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4b05655b02501096"></script></div>
    <!-- AddThis Button END -->

    3. Done!


    Hope it was clear :>

    ReplyDelete
  15. Peace Mohammad. Thanks for your help with everything. I've come across a major dilemma & I don't know what to do. While posting today, I noticed that the right column of my blog is missing. All the gadgets are there in the layout section, but it's not showing up on the blog. Do you know why this has happened and what can I do to correct the problem? I've checked other browsers and all the problem remains. What do I do?

    ReplyDelete
  16. @Mr Wells,

    What was the last editing that you did to your template? Did you backup your template?

    The problem can be resolved only once you undo the last changes that you made. think of it and things will surely recover. don't worry it's not a big problem. you just need to undo the last changes that you made inside your blogger template.

    Your right sidebar is hanging down that means something is shifted to extreme right in your template which took the place of the right sidebar.

    ReplyDelete
  17. Mohammad, the only thing I did was add my blog list (which I now removed) but still the right column is below. I applied code for the "Add this" to move to the right following that. I placed it back to the left. Still it's below. Don't know what to do. I'm freakin out.

    ReplyDelete
  18. @Mr Wells


    Email me your template at mustafa.stc @ g mail .com

    I will try to fix the problem and return you the template

    ReplyDelete
  19. Peace Mohammad,

    I was able to fix the hangup. It was caused by a "jumpbreak" I put into a post. Did some research and was able to correct the issue. Still not able to insert the "jumpbreak" inside the post w/out the right side hanging up. Also, I believe I'm using your fileave player w/google sites. what sections do I change to my url and what should it look like. It works now using your code but I'm sure that's not what I should be using.

    Thank you.

    ReplyDelete
  20. @Mr wells

    Congress that you fixed the issue. Though I didn't understand the term "jump break"

    As far as I understand from your last words concerning the player, do you want to customize the player so that it suits your blog look and feel. If yes than follow the instructions in the above post once more and use MBT HTML Editor to customize the player and then use it in your blog.

    To add the player to mbt html editor read my first comment.

    ReplyDelete
  21. The new Read More link in blogger is what I'm referring to when I say "jump break". I went to this site http://swathi-pradeep.blogspot.com/2009/09/problem-with-jump-breaks.html and did what instructed to do, but I still get the hanging down of my right column, so I remove the "jump break". Still, I'd like to learn how to use it.

    As far as the player is concerned, the look is fine. I've changed the color to suit my preference but my concern is the codes data =http://mustafastc.fileave.com/player1.swf and value=http://mustafastc.fileave.com/player1.swf. Am I to change these two codes or do I just change my url for the song I'm going to use? I saw in the previous post where you said to save the flash player file. I did a right click and saved link as to my music folder. Do I upload this file to google sites? I've exceeded my limit with Fileave and can't afford to upgrade yet? What do you suggest?

    Thank you

    ReplyDelete
  22. @Mr Wells

    I personally don't like the "read more" functionality offered by Blogger. I use a manual method. I you prefer that too then read this post -> Continue Reading or Read More Link For Blogger


    I have also somewhat exceeded the limits and desire to shift my files to boxtr.com
    Indeed you just need to change the Mp3 URL. It would be a great mercy on me if you save the flash file player1.swf in your own account. :>>

    To save the flash file, right click the link below and choose "Save Link As"

    Flash Player File

    ReplyDelete
  23. Sorry Mohammad, no luck w/the "read more" link. tried it on an existing post and it didn't work. Also, how do you get the name of the song to appear in the player? I copied one of your player color codes and modified it to my preference, but the artist name & song doesn't appear.

    ReplyDelete
  24. @Mr wells

    Didn't worked? Do you mean the sidebar stills hangs down? If that is not the case than make sure that did you nested your text inside these tags,

    <span class="fullpost">Write Hidden Text/Summarized Text Here</span>

    For the song title and name to appear in the player do this,
    1. In your song drive, right click a song and choose properties
    2. You will see two tabs i.e General and Summary
    3. Inside General tab, write your Song Name or Source
    4. Inside Summary Tab, write your song title
    5. Now upload your song file and use it in your player
    6. That's it!

    ReplyDelete
  25. Mohammad,

    "You nested your text inside these tags," i'm not sure what you mean by this. I did see the "continue reading" text in every one of my post though. couldn't get it in just one post as needed.

    ReplyDelete
  26. Is the continue reading list appearing below all your posts? I mean can you see a summary of your posts on homepage or the entire post with full length.

    By nesting I meant that enclose the hidden text between the two tags as described in my last comment. The hidden text is the text that visitors will see only when they click the read more link. For example in my homepage you see the full length post only when you click the read more link.
    Which post are you troubled with?

    ReplyDelete
  27. Muhammad, "Is the continue reading list appearing below all your posts?" Yes, on every post it shows "I mean can you see a summary of your posts on homepage or the entire post with full length." The entire post appears. I took it out until I can correct the problem.

    New question. can frames/borders be done in blogger as it appears in the site below? I'd like to create this in my blog. www.mysoullessons.blogspot.com

    http://whentheyreminisce.com/

    Thank you

    ReplyDelete
  28. @MR Wells


    I was right you didn't insert two tags while writing a post. I would encourage that you use windows live writer and re-read the post on read more link especially the last portion of the post. You will spot the mistake instantly. Don't try read more link with blogger editor for it is simply incapable.


    Unfortunately frames are not supported in blogger. That is why I have created a whole new html page for MBT HTML EDitor

    ReplyDelete
  29. Mohammad, how are you sir. I've been busy with the blog but I just wanted to thank you for all your help. I do have a problem. Just noticed my mp3 player is not showing up. You can click where it should be and all you see is the outline. I didn't do anything to the template so why is it not showing up? www.mysoullessons.blogspot.com

    ReplyDelete
  30. @Mr Wells

    Welcome Back Mr Wells. I am really fine. Thanks for asking

    Recheck your hosting service. The flash file is not loading. Re-upload the files. or use mine.

    ReplyDelete
  31. it's showing now. don't know what happened. using opendrive. hasn't given me any problems up til today. are you still fileave? have you found another hosting site you would recommend me? do you have google talk?

    ReplyDelete
  32. thank you Mohammad! i'm using this nice & custom player on my profile now.It's really a big help to bring 'live' to my profile..
    may God bless you.

    ReplyDelete
  33. @Mr Wells

    Yes I am still with fileave.com. And I have no complains so far. I really recommmend any service because all are ran by people who have less funds and thus they have no trusted system. You can catch me any time at mustafa.stc at G Mail Com
    Sorry for late reply. :>>


    @Fazrul arhan

    You welcome friend!

    ReplyDelete
  34. @Mohammad
    Thank you : )

    @Guys,if u wanna try this hosting:

    http://www.mydatanest.com/register

    It upload files faster than Fileave..but i'm not sure which one is better coz i just tried it yesterday and it load song as fast as Fileave.But anyway,i'm using both Fileave & Mydatanest.

    ReplyDelete
  35. Thanks Mohammad, your information is very helpful. Question: I've followed your instructions for naming the song so that it shows in the player, but it hasn't worked (all I see is "Track #1"). Any suggestions?

    ReplyDelete
  36. @fazrul arhan

    Data nest may be a good option but I haven't used it. Though I am loving fileave :>>


    @Mr Will

    Can you create a post on a test blog and keep trying. I guess this is the best way to get things done via trial and error rather on your main blog. Do as instructed previously. Dear it will work may be you have missed some part :)

    ReplyDelete
  37. Hi!
    I need help! How I can repeat song?
    Tag: loop=no& - don't work =(

    ReplyDelete
  38. @Chicago

    Simply change loop=no& to loop=yes& and for no buffering kinldy change your hosting or use a smaller mp3

    ReplyDelete
  39. what can i do to make my player show the name of the file/song?
    on mine it just says "track#1"

    ReplyDelete
  40. Hey,Mohd
    Can you Do One Favour To me, I have Embed The Script And I m still Not Able to Get ,Every .mp3 Files Player Links, You know wht i mean, Its Not Read Every .mp3 File Auto? We have to Put Seprate For Every Songs :\ That's Really Shit :( , Please Reply Asap!

    Shekhar

    ReplyDelete
  41. There is a problem in my site. I followed your first post and i succeed, but when i tried to change the colors. This time i cant even see the audio player in my site. Whats the problem. Please explain. Thanks for the tricks.

    ReplyDelete
  42. Should I be able to use this code in Blogger? I tried and it's telling me the HTML is incomplete.

    ReplyDelete
  43. Hi, Mohammad Mustafa Ahmedzai. Your tricks work is wonderful its amazing. nice post and very useful for me. i have question i hope you will solve this.

    can i create playlist in this player ? can you tell me please ?

    i installed this player in my blog its working successfully .

    Thank you.!

    ReplyDelete
  44. Thank you for your great tutorial guide. it really helpful for me to modify my wordpres blog.

    ReplyDelete