Fullwidth Audio Player - jQuery plugin

This audio player is supported by all major browsers (Firefox, Chrome, Safari, IE7 -9, Opera etc.) and mobile devices like iPhone, iPad, Android etc.. It comes with a lot of Options and a great API .
One of the greatest feature is that all graphics are created with HTML5 canvas and for those browsers which do not support HTML5 canvas, a SVG fallback will be used. That means for you, you do not need to edit any image files to customize the colors by your wishes – just set the color values in the options of the plugin.
Your visitors can also share each of your tracks on facebook or twitter. The player also detects when you add a track and a track with a same title in the playlist already exists, then the already added track will be selected and starts playing.

Important Information for mobile devices:

Autoplay, the volume bar and the visual playlist will be automatically set to false, when viewing the player on a mobile browser. So dont wonder why you dont see it on your mobile devices. The player will be also automatically set at the top of the page, because a fixed footer is not supported by the most mobile browsers

How does it works

You only need to create a div element with an unique id anyhwere in your HTML document and add your soundcloud tracks or mp3 tracks to it:

<div id="fap">
<a href="http://soundcloud.com/radykal/favorites"></a>
<a href="music/Fobee-Xpoint(envato).mp3" title="Fobee - Xpoint" target="http://google.de" rel="cover1.jpg" data-meta="#fap-meta-track1"></a>

<span id="fap-meta-track1"><a href="http://google.de" target="_blank">Download for free</a></span>
</div>

And add the plugin to this div element:

$('#fap').fullwidthAudioPlayer({autoPlay: true, wrapperPosition: 'top'});
//this will init the audio player with autoplay and set the player at the top of the page.

Features

• MP3 /Soundcloud Player in Flash/HTMl5
• Supports HTML and XML Playlists
• Keyboard Navigation
• Auto-Cover-Replacement
• Unlimited color variation, no image files are used
• Share your tracks on Facebook and Twitter
• A lot of options and a great API

Options

• wrapperPosition – top or bottom
• mainPosition – left, center or right
• wrapperColor – background color of the wrapper
• mainColor – color for the graphics and other elements
• fillColor – background fill color of all graphics
• metaColor – color for some graphics and meta text
• strokeColor – color of all strokes
• fillColorHover – background fill color when you move your mouse over it
• activeTrackColor – background color for the current selected item in the playlist
• soundcloudKey – your own API key to use soundcloud
• twitterText – twitter text
• facebookText – facebook text
• soundcloudText – soundcloud text
• height – the height of the wrapper
• playlistHeight – the playlist height
• coverSize – size (x,y) of the cover
• offset – the offset between playlist and upper content
• opened – open player by default
• volume – show/hide volume bar
• playlist – show/hide playlist
• autoLoad – loads the music file when soundmanager is ready
• autoPlay – enable/disbale autoplay
• playNextWhenFinished – plays the next track when current one has finished
• keyboard – enable/disable the keyboard shortcuts
• socials – show/hide social links
• xmlPath – path to XML file, when you would like to manage your tracks via it
• xmlPlaylist – ID of the playlist which should be loaded into player from the XML file
• Since V1.3: popupUrl – The URL of the popout.html
• Since V1.3: autoPopup – Pop out the player in a Pop-Up Window automatically
• Since V1.3: randomize – Randomize default playlist
• Since V1.3: shuffle – Show/hide the shuffle button
• Since V1.3.1: sortable – Make playlist sortable via Drag&Drag
• Since V1.3.1: base64 – Set this to true when you would like to use the base64() PHP function, to hide the MP3 URL

API

Methods

• $.fullwidthAudioPlayer.play();
• $.fullwidthAudioPlayer.pause();
• $.fullwidthAudioPlayer.toggle();
• $.fullwidthAudioPlayer.previous();
• $.fullwidthAudioPlayer.next();
• $.fullwidthAudioPlayer.volume(0-1)
• $.fullwidthAudioPlayer.addTrack(trackUrl, title, meta, cover, linkUrl, playIt)
• $.fullwidthAudioPlayer.clear();

Events

• ‘onFapReady’ – Gets triggered when the default playlist has been created and the player DOM has been built.
• ‘onFapPlay’ – Gets triggered when the player starts playing.
• ‘onFapPause’ – Gets triggered when the player gets paused.
• ‘onFapTracksAdded’ – Gets triggered when new track(s) has been added to the playlist. It also returns an array of the actual playlist.Array with all tracks. Each entry in the array is an object that contains track data.
• ‘onFapTrackSelect’ – Gets triggered when a track gets selected from the playlist. It also returns the current track, that has been selected.Object that contains track data.
• ‘onFapClear’ – Gets triggered when the player has been cleared with the clear() method.

Updates

1.3.1 – 17.4.2012

• Now you dont need to create an own souncloud key anymore
• Sortable playlist via Drag&Drop
• Enable base64 decoding, when you would like to hide your track URL ´s with base64() PHP function

1.3 – 15.4.2012
One of the best updates I did for the audio player. The Pop-Up feature makes the player to one of the best audio player out there!!

• Now you can pop out the player in a Pop-Up window. This enables you to play music and browsing through your site.
• Shuffle button
• Randomize default playlist
• Issue fixed: When requesting a new site before playlist is created, an alert pops up

1.2 – 15.1.2012

• Download button next to the “Check on soundcloud” button. So when its possible to download the song from soundcloud, the new button will appear and you can download the song without switching to the song page on soundcloud.
• Notification alert removed when the player has no tracks.

1.1 – 26.11.2011

• Custom Events that will be triggered by the player and you can listen to it and execute your own functions to it.