Skinning an audio player (the easy way?)

Having done a fair amount of research on the topic, skinning an audio/video player is, well, kind of a pain.  There’s tons of open source javascript/jquery-based players, but any modification of them requires a fair bit of knowledge to even begin editing them.

Enter (-sigh-) Pickleplayer.

Pickleplayer is a super-stripped down player.  You can’t play with your format too much (circular scrub bars are out of the question, for instance) but it does let you design your own layout and colors.

So, first things first, navigate to the above link (or here it is again)

There’s two ways to do this:

1.  They have a web interface that will let you edit a media player

2.  A desktop interface which just downloads the web version



Click either the thumbnail on the left to go to the web interface or click the Windows/Apple logo to download the standalone version to your computer

This is the default player layout that Pickleplayer will provide you with.  The buttons to the left will enable/disable certain controls.

The only things I really want for my player are:

  1. Play/pause
  2. Scrubber
  3. Volume
  4. Time display

So I’ll disable everything else:


Clicking on any control will let you change its colors in the upper right, and you can resize or move them by clicking and dragging.  After playing around for a while, I end up with this:

Simple, but it works.

Go to file -> publish, fill in the optional fields if you want, and you will automatically download a .zip file containing your skin’s files.  Unzip this, and you’ll find a whole bunch of image files, but what’s important here is the .css file you’ve created.

Now, to actually put this player into your webpage, you’ll need to upload some files:  1.  the .css file created from the designer, 2. all of those images from the zip and 3.  pickle.js, available here.

Upload all of these to your webpage (preferably in their own directory, I called mine ‘pickle’)

In the <head> section of your page, you’ll need to add two lines:

<script language=”javascript” src=”pickle/pickle.js”></script>
<link href=”pickle/player_stylesheet.css” rel=”stylesheet” type=”text/css”>

and then wherever you want to add your audio, simply

<div data-media=”pathto/sound.mp3″></div>


Of course, having typed this up, I realize that even this is a bit complicated.  Still the easiest method to reskin a player, as far as I know.






~ by kylemagocs on October 23, 2012.

%d bloggers like this: