Fullwidth Audio Player

You can also put some custom links here This is another meta text (optional)

#### The ultimate Audio Player for playing own MP3 files and Soundcloud tracks on all devices.

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 created with the Raphael Javascript Library 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.

## Keyboard shortcuts

You can even control the player with your keyboard.

- Space - Toggling the player
- Arrow Left - Previous Track
- Arrow Right - Next Track
- Arrow Up - Volume Up
- Arrow Down - Volume Down

## 5 different techniques

You can add tracks to the player with 5 different techniques: HTML Playlist, HTML External Playlist, HTML External Single Link, XML Playlist, XML External Playlist

### HTML Playlist

You can add a default playlist to the player, so this will be loaded in the player when its created.

    <div id="fap">

      <a href="http://soundcloud.com/radykal/favorites"></a>

      <a href="music/Fobee-Summervibez(envato).mp3" title="Fobee - Summervibez" target="http://google.de"  rel="covers/cover2.jpg" data-meta="#fap-meta-track2"></a>

      <a href="music/Fobee-Xpoint(envato).mp3" title="Fobee - Xpoint" target="http://google.de" rel="" data-meta="#fap-meta-track1"></a>

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

      <span id="fap-meta-track2">This is another <strong>meta text</strong> (optional)</span>

    </div>

### HTML External Playlist

Create a playlist anyhwere in your HTML document and just add the fap-my-playlist class to it.

- Fobee - At Night (own MP3)
- Coldplay - Paradise (Fedde Le Grande Remix)

    <ul class="fap-my-playlist">

      <li><a href="music/Fobee-At Night(envato).mp3" title="Fobee - At Night" target="http://google.de" rel="covers/cover2.jpg" data-meta="">Fobee - At Night (own MP3)</a></li>

      <li><a href="http://soundcloud.com/brandon_selective/coldplay-paradise-fedde-le">Coldplay - Paradise (Fedde Le Grande Remix)</a></li>

    </ul>

### HTML External Single Link

Add a track to the player with just one single link. Just create a link anyhwere in your HTML document and add the fap-single-track class to it.
Afrojack - Lionheart (Soundcloud)

    <a href="http://soundcloud.com/djlewisvi/afrojack-lionheart" class="fap-single-track">Afrojack - Lionheart (Soundcloud)</a>

### XML Playlist

You can also use a XML file to manage your playlists. Just set the xml path and the default playlist in the options of the plugin.

    //Javascript code

    $('#fap').fullwidthAudioPlayer({xmlPath: 'playlist.xml', xmlPlaylist: 'pl1' });

    //XML structure

    <?xml version="1.0" encoding="UTF-8"?>

    <playlists>

      <playlist id="pl1">

    	<track href="music/Fobee-Runway(envato).mp3" title="Fobee - Runway" target="http://google.de" rel="covers/cover1.jpg">

    	  <meta>

    	    <![CDATA[ <a href="http://google.de" target="_blank">Lorem ipsum dolor sit amet</a> ]]>

    	  </meta>

    	</track>

    	<track href="music/Fobee-Summervibez(envato).mp3" title="Fobee - Summervibez" target="" />

    	<track href="music/Fobee-Xpoint(envato).mp3" title="Fobee - Xpoint" target="http://radykal.de" />

      </playlist>

    </playlists>

### XML External Playlist

Would you like to create a HTML playlist anywhere in your document from the XML file? No problem, just create a div element and add the fap-xml-playlist class, the ID of the playlist and a title for it.

    <div class="fap-xml-playlist" id="pl1" title="My Playlist 1"></div>

## How to add soundcloud tracks

You can set different links for adding your soundcloud tracks. The player supports single tracks, track sets, user's tracks and favorites.

### Single Track

Avicii - Fade Into Darkness (Vocal Mix)

    <a href="http://soundcloud.com/aviciiofficial/preview-avicii-penguin-fade" class="fap-single-track">Avicii - Fade Into Darkness (Vocal Mix)</a>

### Track Set

Swedish House Mafia Set

    <a href="http://soundcloud.com/officialswedishhousemafia/sets/rootmusic-bandpage/" class="fap-single-track">Swedish House Mafia Set from Soundcloud</a>

### User tracks

Armin van Buuren Tracks

    <a href="http://soundcloud.com/armin-van-buuren-3" class="fap-single-track">Armin van Buuren Tracks</a>

### User favorites

AN21 Favorites

    <a href="http://soundcloud.com/an21/favorites" class="fap-single-track">AN21 Favorites</a>

## Change some Options by yourself

#### Colors

Main Color
Fill Color
Fill Color Hover
Meta Color

#### Wrapper Position

Top
Bottom

#### Main Position

Left
Center
Right

#### Activations

AutoPlay
Social Links
Volume Bar
Visual Playlist

## 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
- onReady - a function that will be called when player has been built

## API

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

#### Try it...

#### Add your own MP3 files or Soundcloud tracks

Your MP3 URL or Soundcloud link
Track title *
Meta Text *
A cover image *
Link that will be shared *
Play It ?
* Optional and only for an own MP3 file