Monday, October 17, 2011

Designig Your WP audio player

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):
audioplayer
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:
audioplayerhover
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 Below

The current version of the WP audio player includes some additional options not documented in the outdated Support info page [Update: now included in the new Support doc]. As in the case of the color options, you activate them by adding extra pieces of code before the closing bracket of the player shortcode (for the standard shortcode):
|titles=TITLE HERE track title
|artists=NAME HERE artist name
|remaining=yes shows remaining rather than elapsed track time
|initialvolume=NUMBER HERE initial volume level (from 0 to 100; default is 60)
|loop=yes loop play
|animation=no player always open
|width=NUMBER HERE player (open) width; default is 290
You can also have a group of tracks in the same player, by pasting their URLs the one after the other, separated by commas; same thing for the (optional) track titles and artist names. For example:
[audio URL1 HERE,URL2 HERE|titles=TITLE1 HERE,TITLE2 HERE|artists=NAME1 HERE,NAME2 HERE]

0 comments:

Post a Comment