You can change the color of the various components of the audio player, by including additional pieces of code in the shortcode (for the standard shortcode see here). You add them right after the URL of the mp3, as shown in this Support info page; their example:
[audio http://wpcom.files.wordpress.com/2007/01/mattmullenweg-interview.mp3 |bg=0x0000ff|righticon=0xff0000]
But I thought I might make things more clear by showing which piece of code corresponds to which component of the audio player (plus correct a couple of mistakes and omissions):
| 0: | |skip=0xHEX | [← not included in the Support page] |
| 1: | |leftbg=0xHEX | |
| 2: | |lefticon=0xHEX | |
| 3: | |bg=0xHEX | |
| 4: | |righticon=0xHEX | |
| 5: | |rightbg=0xHEX | |
| 6: | |text=0xHEX | |
| 7: | |tracker=0xHEX | [← Support page has “slider” instead of “tracker”] |
| 8: | |loader=0xHEX | |
| 9: | |track=0xHEX | |
| 10: | |border=0xHEX | |
| 11: | |bgcolor=#HEX | [← not the way the Support page has it] |
| 12: | |volslider=0xHEX | [← not included in the Support page] |
| 13: | |voltrack=0xHEX | [← not included in the Support page] |
When hovering over:
| 14: | |righticonhover=0xHEX |
| 15: | |rightbghover=0xHEX |
Where I’ve written “HEX”, you paste the hex number for the desired color; to find colors/numbers, you can consult this (or other similar webpages).
No.11 must be changed if the background to the text is not white in the theme you’re using; to find your blog’s colors, you can use the “Colors (finder)” links in my left sidebar. Or you can eliminate no.11 altogether, by adding this:
|width=80
Note 1: The images above display the default look of the audio player, i.e. what you get if you don’t add any extra command.
Note 2: The Support info page includes this phrase: “In order to use the audio player and upload music to your blog, you will need to purchase the Space Upgrade.” This is misleading, as you definitely don’t need the space upgrade to use the audio player: you can upload your mp3s in a free file host such as Fileden or Getdropbox, get the direct URLs from there and use them with the audio player shortcode.
[Update: Support info page corrected; it now reads: “You can share music on your blog by linking to an audio file, by purchasing the space upgrade and uploading music files to your media library, or by using a third-party service.”]
Note 3: Additional options here.
https://wpbtips.wordpress.com/
wordpress tips 
OK, you asked for English corrections, so I’ll introduce you to Grammar Girl,
( http://grammar.quickanddirtytips.com/hopefully.aspx ) and her explanation about using the words “hopefully” and “hope.”
“But I thought I’d hopefully make things a bit clearer…”
I would say:
“I hope to make things a bit clearer…”
Now I am sure that is as clear as mud!
Posted by Tess | May 10, 2009, 18:13Ha! Convoluted but clear! Interesting site. My Collins has this to say: “You say hopefully when mentioning something that you hope and are fairly confident will happen. Some careful speakers of English think that this use of hopefully is not correct, but it is very frequently used.” I’ll rephrase it anyway, but I don’t like “I hope” ; how about “I thought I might make”?
Posted by Panos | May 10, 2009, 22:03Yes, I was a fan of Grammar Girl until I changed computers and didn’t transfer my bookmarks. Now I’ve rediscovered her.
This sounds confident, and is simple:
“I’ll make things clearer by showing…”
This sounds conversational:
“I’d like to make things clear by…”
This sounds tentative, but friendly:
“I thought I might make things more clear…”
And what you wrote is certainly acceptable to most people.
It was difficult to find any English to correct on your site.
≥^,^≤
Posted by Tess | May 10, 2009, 22:32Oh great! You understand I’d like these posts to be as presentable as possible…
Posted by Panos | May 10, 2009, 23:21Of course!
But nonetheless, hmm?
(How is that for an example of fine A-level grammar on my part?)
If you like, I’ll take a more critical look at what you have written, but keep in mind that you remain intimidating to me, and thus I’ll hesitate to make any critique.
Posted by Tess | May 11, 2009, 02:49By the way, as long as I’m here commenting, where is a formatted example of this? Where is the music you could show us that is of interest to you?
Posted by Tess | May 11, 2009, 02:53Intimidating? I don’t believe it! (Well, I do, because unfortunately it’s not the first time I hear this…) Why? (Don’t answer that, please: it’s a protest, not a question – I thought we are on friendlier terms than that!)
“I’ll take a more critical look but I’ll hesitate to make any critique” sounds as if you’ll spot problems but won’t tell me! Anyway, if you care to point out something, that’s fine with me. If you don’t feel like it, that’s fine too. If you can assure me that at least there’s nothing glaringly awkward, that’s enough.
Yes, no formatted example. What I would prefer would be very discreet, hence not enough as a demonstration; an all too colorful example, on the other hand, would be in very bad taste. The FAQ example is already ugly, in my opinion; penguin-club ugly.
Posted by Panos | May 11, 2009, 13:10Oh, I was asking why you don’t take the opportunity to reveal another music gem; and a tastefully formated player could be quite elegant.
So, forget about intimidating—and I won’t worry that you’ll think I’m an idiot (as I was on at least one occasion).
{“…it’s not the first time I’ve heard this…”}
I’ve told you already that your writing is excellent. And I promise to tell you if I notice a faux pas.
Posted by Tess | May 11, 2009, 15:35You worry too much, methinks… If I thought you were a [what?], we wouldn’t be speaking.
Posted by Panos | May 11, 2009, 18:30Perhaps I need to remind you this comment (phrase that starts with “Of all the people”).
Posted by Panos | May 11, 2009, 18:37OK. understood.
Now, I’ve read through your blog and found no serious flaws, but a few things (6) I would have phrased differently. Want me to email or post here?
Posted by Tess | May 11, 2009, 20:17Whatever you prefer. I’d just find it more practical to have all remarks in one place, not scattered here and there: so either one comment here or a mail.
And what can I do in return? Want me to work out the code for masking the corners or the header tabs? (For the latter I’ll need directions as to style.)
Posted by Panos | May 11, 2009, 22:48email it is then: less off-topic clutter in your comments and easier to delete.
It was no problem for me—I don’t expect anything in return—though I’d love some help with that project.
One odd thing about what I’ve done so far with the robin’s egg blue background, I looked at my site on my husband’s laptop (mac, about a month old, and of course I wasn’t logged in to my account) and it was not there at all! Can you see it? And remember how you helped me get my tagline centered in the nice little area between the rss links and the search box? I discovered that because it was on top of them (z-index), they wouldn’t work. As it is now, it’s a little too close to the top of the page, but if it were any lower it interferes with the navigation tabs.
…and I’m looking forward to a nice translation of “LLorona.”
Posted by Tess | May 11, 2009, 23:27That’s what I’m working on now, so I’ll drop by later!
Posted by Panos | May 11, 2009, 23:46This post has helped me tremendously, not for my current blog but for something I’d like to do professionally. So thank you very much. But this:
“you definitely don’t need the space upgrade to use the audio player: you can upload your mp3s in a free file host such as Fileden or Getdropbox, get the direct URLs from there and use them with the audio player shortcode”
This is awesome. Money is very tight and I’m not sure if I’d have figured this out on my own (or known where to find a good free host). I hope even if you move on to other projects that you keep this journal online because of little gems like this. Thank you.
Posted by foxrafer | May 24, 2009, 14:07@foxrafer: You’re most welcome. And of course I’ll keep this online – that’s why I started it in the first place (I’ve got many more tips to post): by now I’ve given many replies in the forum, and I thought it might be a little useful to organize some of these things and have them available outside the wp forum. Judging from the visits via Google search that I see in my stats, I wasn’t wrong.
To be fair, the wp FAQ on audio continues with this: “Adding Audio Files to Your Blog / There are 3 ways to do this: 1) Upload an mp3 file […] somewhere on the internet” etc. (my italics). But it’s easy not to grasp what that means and be misled by the phrase I commented on in the post. Me and other experienced volunteers such as raincoaster and thesacredpath have had to explain this many times in the forum.
[Update: FAQ now corrected – see end of post.]
Posted by Panos | May 25, 2009, 01:26Panos – I can’t get one of my colors to show up in the audio player. I’m using a blue – 00458E – but it shows up as black. Any idea why?
Thanks for this, BTW.
Posted by vjp | September 26, 2009, 19:29OK – there must be something else at play here, as I can’t get the slider to change colors, either.
Posted by vjp | September 26, 2009, 19:35Just tried your blue in my tests blog and it works fine (slider and everything). The only time I saw wrong colors was with the wrong code Support gives for my no.11. So I can’t really tell at the moment – and I can’t promise I’ll find what’s going on, but maybe give me a link so I can check your source code?
Posted by Panos | September 26, 2009, 20:38I was setting this up to use a the default so the code doesn’t appear anywhere on my blog. Going to try to post the code here.
Posted by vjp | September 26, 2009, 21:27BTW – the following elements show up as black on my blog:
lefticon
righticon
rightbg
rightgbhover
tracker
loader
Thanks for looking at this.
Posted by vjp | September 26, 2009, 21:33Caught the little rascal! You’ve got the wrong x’s after the zeros. Make sure you type a normal x in their place, not the one you copied from my post. And sorry for that: you see, in order to display the codes in the posts I have to convert them, and I hadn’t noticed that some of the x’s turned out bad – thanks to you I corrected the post too!
Posted by Panos | September 26, 2009, 22:09That fixed it! (Plus I had an extra space in one place.) Just one more little thing: the left icon when the player starts playing (your #2 bottom above, where the volume icon is): mine still shows the default color, instead of inheriting the color from lefticon. Perhaps there is another code there?
You can see it in this post http://wp.me/pq7a-2vv
Posted by vjp | September 26, 2009, 22:54Yes you’re right: “volslider”.
(Damn! Now I’ll have to rework the whole post!)
[Post updated – P.]
Posted by Panos | September 26, 2009, 23:14And “voltrack” for its background.
Posted by Panos | September 27, 2009, 00:13Heck yeah! Great, great work, Panos! (I didn’t have to change the “voltrack” item – it was the proper color from the leftbg.)
Thanks again.
Posted by vjp | September 27, 2009, 01:33One more thing: I just noticed that for your #11 you have “bgcolor” as opposed to “bg” which is what the FAQ shows. I used “bg” without any problem.
Posted by vjp | September 27, 2009, 01:36Whoa – just tried using “bgcolor” as shown in your #11 – not good, at least on my end. It put a whole bar of color there where the expanded thingee would be even if the player wasn’t expanded.
Posted by vjp | September 27, 2009, 01:41By “background” I meant the background to the little volume strips, not the general left bg. As for the bgcolor, “putting a whole bar of color there where the expanded thingee would be” is the whole point! That area isn’t transparent or unoccupied, it’s white; so the bgcolor bit is useful —nay, mandatory!— for themes in which the main column bg isn’t white.
Posted by Panos | September 27, 2009, 02:02By the way, for the codes I had consulted (did it again after your question on the volume slider) the official page of the standalone version of this audio player:
http://wpaudioplayer.com/standalone
Posted by Panos | September 27, 2009, 02:07Ok, I think I understand what you’re saying. It’s hard for me to see because my background is white so I didn’t know that box was there. I misunderstood and thought your #11 was actually what I now see that you show as #3. Duh!
Posted by vjp | September 27, 2009, 03:23how can i put aphostrophe’s in the title
I tried titles=I Ain’t Never
becuase that is the song title
however it displays as
I Ain\’t Never
so there’s a problem.
I tried &39;
and that just showed instead of encoding the acsii entity.
Is there a way to get the apostrophe’s without the escape going on?
Posted by lemboallan | December 23, 2009, 10:56We’ve got 6 songs that have apostrophe’s in their titles and we’d like to use this.
Posted by lemboallan | December 23, 2009, 10:57Answered here.
Posted by Panos | December 23, 2009, 15:26I’m still trying to change my song title from saying “Title #1”.
How do I change that and replace it with my song title?
Please show me how it should be placed in my html. This what I have:
Posted by Don | February 12, 2010, 09:56@Don: If you did try to paste “what you have”, then apparently it’s wrong or it wouldn’t have been stripped out. Did you check the post I link to? This one:
https://wpbtips.wordpress.com/2009/05/17/audio-player-additional-options/
Posted by Panos | February 12, 2010, 12:11Quick question.
Can you edit the WP audio plugin with a style sheet?
Posted by Phorge | June 17, 2010, 21:09@Phorge: Sorry, I can’t answer your question. I’m experienced in wp.com blogs while you’re talking about self-hosted ones: different software.
Posted by Panos | June 18, 2010, 00:02Thanks Panos, I didn’t find so much info on the audio player anywhere else. Not even at 1pixelout.net. I liked the way you cracked the background color code (|bgcolor=#HEX).
Any tips to make the background (no. 11) just transparent?
Posted by indianraga | November 17, 2010, 18:26You’re welcome. No tips on that, I’m afraid: the option is supposed to be transparentpagebg=yes, but it’s one of the options that don’t work in the wp.com version of the player.
Posted by Panos | November 18, 2010, 12:55Thanks for the tips, I am just a novice at this, it is very useful indeed.
Best wishes from not so sunny Oxford (UK)
Posted by BRUNO GUASTALLA | January 1, 2011, 22:43You’re welcome and all the best to you too!
Posted by Panos | January 4, 2011, 09:40how can i change the default code for the whole blog instead of the painful entry by entry method. here is my blog, thegrindaily.com please help!!! here the code i want to use –
Posted by Ray Stantz | January 12, 2011, 01:15Copy paste entry by entry: no other method, unfortunately.
Posted by Panos | January 12, 2011, 11:49pak.. klo buat upload flash trus ditaruh di sidebar gmn ya/?
Posted by elnicovengeance | May 24, 2011, 03:35?
Posted by Panos | May 24, 2011, 20:44Hi Panos! Your tips are pretty cool and I remembered you helped me a few months back with embedding Vevo video content! Thanks again for that!
Well, I need your expertise on another matter — this time: embedding audio! I’m in the process of adding a new post to my blog and I’m trying to embed an audio player within the copy.
The HTML ’embed’ code from the source looks like this:
[Code relic removed – P.]
But after I copy/paste the code and click “Preview,” here’s what the result actually looks like:
[Code relic removed – P.]
When I view the “Visual” tab (next to the “HTML” tab), a little Flash symbol is displayed in the area where I pasted the code.
Would you happen to know how I can get the audio player to show up properly within my blog post?
(Do I need to supply you with anything else?)
Your help would be greatly appreciated!
BLOG URL:
http://eddierobinsononline.com/
Posted by eddierobinsononline | June 22, 2011, 04:38That’s weird… the two links above spit out the same code!
FYI: I’m extracting the source HTML from the “EMBED” link of the following URL:
http://www.studio360.org/2011/jun/24/kim-burrell-gospel-love/
[Code relic removed – P.]
Posted by eddierobinsononline | June 22, 2011, 04:41Hi,
Your question actually belongs here:
https://wpbtips.wordpress.com/2010/07/22/gigya-shortcode-3-widgets/
You can’t use such an embed code directly in a wp.com blog. Copy this part:
<embed src="http……….etcetc…………..mp3"></embed>
and turn it to this:
[gigya src="http……….etcetc…………..mp3" ]
Paste into HTML post or page editor. Width can be changed.
PS If you ever wish to show me some code again, check point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
Posted by Panos | June 22, 2011, 05:29Panos, you’re nothing short of amazing! Apologize for posting in the wrong area. And I will follow your comment guidelines next time as well. Thank you again!
Posted by eddierobinsononline | June 22, 2011, 06:17Does that mean you inserted the player successfully?
(No need to apologize: I just wanted you to see what the deal with flash embeds is, and to know that you can’t post code in a comment and expect it to show up.)
Posted by Panos | June 22, 2011, 06:23There’s only one thing missing from this list of code…
Just outside of the tracker, there is a button/icon on the left and on the right that are used to advance the playlist. To change that colour, it’s “skip=0xHEX” – even though there are two icons and each one is a different colour, it is actually the same icon with the same ID name, but in the Flash coding for the player sets an alpha.
Anyway, just thought I’d put that out there.
Posted by Sardonicus | June 27, 2011, 10:17Ah, I didn’t know this – will update the post as soon as possible. Many thanks!
Posted by Panos | June 27, 2011, 19:47Hello, just wondering if there is a way to show a list of mp3s in the player so that the user can click on one to choose which they want to listen to. Kind of like the old Myspace music player. Thanks, Don
Posted by Fringe Paranormal | June 30, 2011, 02:15You can add the URLs of several mp3s in the same shortcode, as shown here:
https://wpbtips.wordpress.com/2009/05/17/audio-player-additional-options/
(In that case skip arrows are added to the player – the ones marked as “0” in the first image of this post).
Or you can use actual MySpace players after you create a playlist – see here:
https://wpbtips.wordpress.com/2009/12/05/alternative-audio-players/
Posted by Panos | June 30, 2011, 02:45Hi, a couple questions here.
What if you have a transparent background? i.e. I have a background image for my blog, the option set to fixed positioning, and when I insert the audio player I’m stuck with choosing a background color for the width of the player. I’d rather have only the volume and slider buttons display when inactive, then slide all the length of the width. I don’t really care about a particular color, the only reason I’m asking is because it forces a color for the whole width even when the audio player is inactive, just because my theme is transparent in some parts.
Thanks in advance.
Posted by hellodocks | October 5, 2011, 13:17Hi,
Obviously you’re not talking about the blog linked to your username. Anyway, unfortunately the WP audio player doesn’t include an option for transparency instead of some color. Do you insert your own mp3s or music you can find on the web? If it’s the latter, you might consider using a better looking player – check my posts on Audio.
Posted by Panos | October 5, 2011, 21:55Also check the suggestion above note 1 in this post and see if the result is acceptable.
Posted by Panos | October 5, 2011, 21:58Yes, I was speaking about idocks.wordpress.com.
Thank you for the answers. I tried that solution about note #1, removing the slider altogether, but I didn’t like the aesthetic so I was looking for an alternative. I have been uploading my own because in many cases it’s hard to find the specific file hosted somewhere else.
Posted by hellodocks | October 5, 2011, 23:54You’re welcome. I just checked Mixpod again, and their Add URL option is back, so even if you upload your own mp3s you can sign up with them ( http://www.mixpod.com/ ) and use one of their players – see here:
https://wpbtips.wordpress.com/2009/12/05/alternative-audio-players/
By the way, are you aware that on http://idocks.wordpress.com/ users with high-resolution screens see white around your bg image? Need a screenshot or suggestions re this?
Posted by Panos | October 6, 2011, 13:23Sure, I’ll take suggestions. I was aware of it but working on uploading a properly-sized variant.
I’ll look into mixpod, thank you. If their add URL option goes away again in the future, will posts still be functional if they link to the player?
Posted by hellodocks | October 6, 2011, 15:531) The problem is that there’s no “properly-sized variant” really: what’s ideal for one screen resolution is wrong for all other screen resolutions. If you can edit images using an application such as Photoshop, my suggestion is: make a copy of the bg image you’ve got now, make its left, right and bottom sides fade to black or a suitably dark blue-black), upload that version, and set the same color as your bg color in Appearance>Background. This way users with very high resolution screens won’t really see where the actual image ends.
2) I guess so. During the time the Add URL tab had vanished, the test playlists I had previously created kept working – I just couldn’t create new ones.
Posted by Panos | October 7, 2011, 10:23Hi, thanks for the great post, i have a question (OT).
I hope you can help me out, i have a song in my header.php file ([wpaudio url=”song.mp3″ dl=”0″ autoplay=”1″]) , as you can see it’s autoplay, but when i go to a different page it reloads the player. Is there any way that the song continues play while user browse through the site?
TIA.
Posted by Berick | October 18, 2011, 20:10Hi, but sorry, I can’t help – see point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
Posted by Panos | October 19, 2011, 02:18Good article :)
Posted by Abed Saragih | January 25, 2012, 09:42