Customizing the Audio Player

This tutorial uses the Audio Player Wordpress plugin from 1pixelout. These instructions concern using that player on non-Wordpress HTML pages. The main tutorial is on another page. This page deals only with customizing the appearance of the player.

Here is the default appearance of the player:

If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.) If you do not see the MP3 player, then you don't have the Flash player installed. (More than 90 percent of all Internet users do have it.)

Tutorial

You will need to add code to the bare-bones markup that is used for the default player. This is shown below in blue.

First, PLEASE NOTE that you cannot separate the lines as I have above. There can be NO hard returns from the beginning of <param name= to the end of the filesname .mp3">

Note also that it is essential that each instance of & remain in place.

Here is Martin Laine's diagram showing what nine of the options mean:

There are three additional color options and two options that are not related to the appearance of the player.

Color Options

There are 12 color options:

bg	Background color (see diagram)
leftbg	Left background (see diagram)
lefticon	Left icon (see diagram)
rightbg	Right background (see diagram)
rightbghover	The color the right background will change to on mouseover
righticon	Right icon (see diagram)
righticonhover	The color the right icon will change to on mouseover
text	Text (see diagram)
slider	Slider (see diagram)
track	Track (see diagram)
border	This is the line surrounding the loader bar
loader	Loader bar (see diagram)

If you don't understand hexadecimal colors, see this page.

Other Options

These options are not related to the appearance of the player:

loop	Will the audio file repeat automatically?	Can be yes or no
autostart	Will the audio file start to play without the player being clicked?	Can be yes or no

Here is a modified version of the same player:

Here is the code that made it:

Customizing the Audio Player

Tutorial

Color Options

Other Options

About