How to stylize the audio player

Ever wonder how theme-makers get the audio player to display just a button? And even, sometimes, a ROUNDED button?

Magically from…

To this…

Well, the concept is easy. The coding… not hard at all!

The Concept

All that is needed is to change the size of the div layer that wraps the audio player to a square, hide the overflow and have the same div layer background as your audio player. Then, you have a couple of options…

A. Circle player
Method: use rounded corners to make it into a circle.

B. Player in center of album art
Method: Absolute position the audio player div layer, set the margin top and left to position it in the center of the album.

The HTML

We are just working with the audio post variables (I am not including caption variables), so your basic codes will look something similar to the follow:

{block:Audio}
{AudioPlayerWhite}
{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}
{/block:Audio}

Now, you need to wrap the audio player in a div layer so you can stylize it. You can use class or id, it doesn’t matter.

{block:Audio}
<div id= "audioplayer">{AudioPlayerWhite}</div>
{block:AlbumArt}
<img src="{AlbumArtURL}" width="100">
{/block:AlbumArt}
{/block:Audio}

The CSS

First, let’s make a plain square player since the CSS stylization you include for this carries throughout other looks. From this point on, you start experimenting with the CSS on how big you want the button to be, and accordingly, you adjust the height and width of the div layer, #audioplayer. There are 3 things you need to include for the div layer…

• Background (matches the audio player, #000000 for black player, #E5E5E5 for the grey player and #FFFFFF for the white player)
• Width
• Height
• Overflow:hidden;

Depending how big you want your player, you may need to add some padding so that the play button is centered in the div layer.

Here’s an example coding of just a small square player…

#player {
width:30px;
height:30px;
overflow:hidden;
}

Ok, now moving onto the circle player, all you’re adding extra to what we have so far is adding large rounded corners in the CSS so that it becomes a circle:

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

Generally, to make it a circle, you need to adjust the radius values (in this example, 30px) to the same value as your height/width.

Ok, now what if we want it centered in an album art? Simply, position it so that it is absolute (in relative to the post) and then adjust top and left margins so that it becomes centered on your album art, like so:

#player {
width:30px;
height:30px;
overflow:hidden;
position:absolute;
margin-top:45px;
margin-bottom:45px;
}

You DO NOT need to add left and top position properties because those are in relation to the window (not post).

Now, you can customize the player however you want. A popular stylization is to make the player semi-transparent.

In that case, just add in opacity values so that the div layer isn’t 100% opaque. Like so:

opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;

Now, in relation to the captions and playcount etc, whenever you add album art, that content is pushed down under the image. So that case, you want to stylize the album art so that it floats to the left, meaning, the content wraps around the image, and some margins so there’s some breathing space between the album art and text. My codes generally look something like this:

{block:Audio}
<div >{AudioPlayerWhite} </div>     
<div >{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
{PlayCountWithLabel}
{block:caption}<div class="caption">{caption}</div>{/block:caption}
{/block:Audio}

And then in my CSS, I’d add:

#albumart { float:left; margin:0px 7px;}

And that’s all there is to it! Happy coding ;)