Dynamic MP3 Player

Package content

The package you purchased contains the following files:

 

XML overview

In the .xml file that comes with the package, you can set a number of settings and add your own albums and tracks to the player. The xml has the following overall structure:

<settings
  playerWidth="570"
  volumeBarWidth="34"

  showPlaylist="1"
  useScrollbar="1"
  allowSorting="1"
  playlistHeight="210"
  groupByAlbum="1"
  minimumAlbumHeight="140"

  playlistHeadSpacing="4"
  playlistMargin="4"
  playlistLineHeight="20"

  headerFont="Arial, 11, #595959"
  playlistHeadFont="Arial, 11, #FFFFFF"
  playlistFont="Arial, 11, #B7B7B7"
  albumTitleFont="Arial, 11, #FFFFFF"
  albumArtistFont="Arial, 11, #C4C4C4"

  playlistLineColor="#1A1A1A"

  autoPlay = "0"
/>

<playlistColumns>
  <playlistColumn title="Album" textVariable="albumID" width="150" />
  <playlistColumn title="Title" textVariable="title" width="200" />
  <playlistColumn title="Time" textVariable="duration" width="60" />
  <playlistColumn title="Custom column 1" textVariable="customVariable" width="100" />
  <playlistColumn title="Custom column 2" linkVariable="customLinkVariable2" imageVariable="customImageVariable" width="20" />
</playlistColumns>

<albums>
  <album 
    title="Album title" 
    artist="Album artist"
    imageURL="Folder/albumImage.jpg"
    >
    
    <tracks>
      <track 
        audioURL="Folder/track.mp3"
        title="Track title" 
        duration = "Track time"
        
        customVariable="customValue"
        customLinkVariable2="http://www.custom.url"
        customImageVariable2="Folder/customIcon.jpg"
      />
    </tracks>
  </album>
</albums>

 

XML overview: settings

Variable name Variable type Value range Description
Player size
playerWidth Number Width of the player in px.
volumeBarWidth Number Width of the volumebar in px.
Playlist
showPlaylist Boolean 0/1 Whether or not to show the playlist. If this is set to 0, some of the variables below will not apply anymore.
useScrollbar Boolean 0/1 Only applies if showPlaylist equals true. Whether to use a scrollbar or to scroll the playlist automatically depending on mouse position.
allowSorting Boolean 0/1 Only applies if showPlaylist equals true. Whether or not to allow sorting the playlist.
playlistHeight Number Only applies if showPlaylist equals true. Height of the playlist.
groupByAlbum Boolean 0/1 Only applies if showPlaylist equals true. If set to true, this will group tracks by album. To use this, you must have added a column with textVariable="albumID". This column will be used to display album information.
minimumAlbumHeight Number Only applies if showPlaylist equals true and groupByAlbum equals true. Height of the album information block. If the number of tracks displayed do not go lower than this value, the new album information will be displayed at this distance from the previous album.
Player look
PlaylistHeadSpacing Number Only applies if showPlaylist equals true. Space between the column heads.
PlaylistMargin Number Only applies if showPlaylist equals true. Space around the playlist.
playlistLineHeight Number Only applies if showPlaylist equals true. Height of the lines in the playlist.
headerFont Quick font style "Font name, font size, hex color" Font appearance for current song title and playtime.
playlistHeadFont Quick font style "Font name, font size, hex color" Only applies if showPlaylist equals true. Font appearance for column head text.
playlistFont Quick font style "Font name, font size, hex color" Only applies if showPlaylist equals true. Font appearance for playlist items text.
albumTitleFont Quick font style "Font name, font size, hex color" Only applies if showPlaylist equals true and groupByAlbum equals true. Font appearance for album title text.
albumArtistFont Quick font style "Font name, font size, hex color" Only applies if showPlaylist equals true and groupByAlbum equals true. Font appearance for album artist text.
playlistLineColor Hex color Only applies if showPlaylist equals true. Color of the lines between playlist items.
Other
autoPlay Boolean 0/1 Whether or not to automatically start playing on startup.

 

XML overview: columns

In the playlistColumns tag you can add as many playlistColumn tags as you like. Each tag will make for one column in the eventual playlist. To make sure the columns display the values you want, you can set various attributes. Read through the following to see which:

Variable name Variable type Value range Description
title String The column name to show above the column.
textVariable String This string contains a variable name. That same variable name should be put in a track tag later in the xml file, so the information from that variable will be shown in the column.
linkVariable String This string contains a variable name. That same variable name should be put in a track tag later in the xml file, so the information from that variable will be used as a button in the column. This can be used for example to link to a band website, a myspace page or an online music store.
linkVariable String If you want to use a (small) image in the column instead of displaying text, use this. This string contains a variable name. That same variable name should be put in a track tag later in the xml file, so the information from that variable will be used as an image in the column.
width Number Width of the column

 

XML overview: albums

In the albums tag you can add as many album tags as you like. Each tag will make for one album in the eventual playlist. You can set the following attributes for every album:

Variable name Variable type Value range Description
title String The album title.
artist String The album artist.
imageURL String Location of the cover image of the album (advised: 80x80px, jpg/gif/png).

 

XML overview: tracks

Inside every album tag there's a tracks tag. In there you can add as many track tags as you like. Each tag will make for one track in the eventual playlist. You can set the following attributes for every track:

Variable name Variable type Value range Description
audioURL String Location of the .mp3 audio file of this track.
<Custom variables> Various You can add as many custom variables as you want just by adding them like myCustomVariable="myCustomValue". These variables can be used to fill additonal columns. See below the explanation for adding columns.

 

Adding columns

To add a column to your playlist, you should first add a row to the playlistColumns tag. First, set the title to display above the column and the width of the column.

A column can display a text value or an image. Whatever is to be displayed is not directly being set here, because you probably want to display different values for every track. Therefore, all you can set here is the name of the attribute in the track tag that contains the actual value. For example, we will first add a new text column using this code:

<playlistColumn title="MyColumn" textVariable="myColumnVariable" width="100" />
Now, if you open the player you'll see this column added, but displaying no values. To add values, look for your track tags and add the following there: 
myColumnVariable="My text"

If you open the player now, you'll see that for the one track you just edited, the column will display My text.

 

Image instead of text

Sometimes you want to display a small image instead of text. For example, you may want to display a small logo icon to link to an online store. To display an image you should leave the textVariable attribute out, and instead use imageVariable. The thing works the same, only you don't set a text value in the track, but a link to the image to display.

 

Add a link to the column

If you want the column value to link to a website URL when the user presses it, you should set linkVariable. Again, this works the same as setting the textVariable. This way, every track can have a link to a different URL. Of course you can also add two columns with links, for example one linking to a mySpace page and one to an online store.

 

Group by album

To display tracks grouped by album with their album images you should set groupByAlbum="1" in the settings tag. Also the first tag of the playlistColumns tag should be as follows:

<playlistColumn title="Album" textVariable="albumID" width="100" />
You can change the title and the width, but textVariable must be set to albumID.

 

Working from a custom .xml file

If you want to make various players, but don't want to upload a zillion copies of the Mp3Player.swf file, you can now choose a .xml file defined in the html, so that you only have to make several .xml files.

 

Copyright notices

You may use this file in any of your projects, either commercial or non-commercial. You may not resell this file as is, or as part of a package, neither may you distribute this file freely, nor 'share' it with others who have not bought an original copy from www.flashden.net. You may though use this file as part of a custom project (e.g. website) for which you earn a payment.

 

Credits

I would appreciate it if you'd put my name and a link to my website (www.jurgencreative.nl) somewhere in the project where you used this file, but of course you don't have to. Also I love to see how my files are being used, so if you have finished your project I would really appreciate it if you would send me a link at flashden@jurgenvisser.nl.

Thank you for purchasing this file,

Jürgen