Playlist 5

Playlist 5 is a simple JavaScript function that creates a playlist of MP3s using HTML5. One of the newly-availalbe tags in HTML5 is the audio tag, so this is just a wrapper that takes a list of song names and file paths, and creates an interactive playlist that plays the specified songs. Optionally, background, foreground, and accent colors can be specified as well.

You can download playlist5.js here.

Here is an example:

Début EP by The Lost Cartographers

▶ We Have Arrived

▶ Charlie

▶ Headed Home

Once you include the playlist5.js file, the playlist5 function has two required variables and three optional color specifications:

string - ID of the HTML element where the player will be placed
array - Song objects with "name" and "path" strings
string - Optional - Accent color (for the currently playing song)
string - Optional - Text color
string - Optional - Background color (Note, default is black, which is the default background color of most browser's HTML5 audio player)

The playlist5 function appends the audio controls and playlist to whatever content already exists in the specified element.
Just call the playlist5 function, and pass it some info:

playlist5("playerDivID", [ { name: "song1 name", path: "audio/song1.mp3"}, { name: "song2 name", path: "audio/song2.mp3"}, { name: "song3 name", path: "audio/song3.mp3"} ] );

And be sure to have a corresponding div where the player will show up:

<div id="playerDivID" style="width:500px;">
	Album Name by Band Name
</div>

That's it!