Features

The Ultimate Audio Player for your website.

3 types of audio sources

You can play music from MP3 files, soundcloud.com tracks and official.fm tracks very easily.

HTML & XML Playlists

Create your own playlists in the HTML document or use XML files to manage your playlists.

Pop-Up Player

Instead of adding the player to the top or bottom of your page, you can use it a Pop-Up window.

Unlimited color variations

You can easily change the colors of the player via the plugin options to create an individual skin.

Keyboard Shortcuts

You can control the player with your keyboard. Toggle: space, Previous: , Next: , Volume up: , Volume down: .

Methods & Events

The plugin comes with custom methods to control the player easily and with helpful events to listen for.

Responsive

The player is designed for any kind of devices - mobile and desktop. It fits his layout to the device screen.

A lot of Options

You can customize the player with a lot of options, so the player behaves like you want.

Supported Audio Sources


MP3 Logo Soundcloud Logo Official.fm Logo

V2.0.1

Setup

You can add tracks to the player with 5 different techniques.

You can easily set a start playlist, which will be added to the player from beginning.
<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="preview/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>

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

<ul class="fap-my-playlist">
<li><a href="music/Fobee-At Night(envato).mp3" title="Fobee - At Night" target="http://google.de" rel="preview/cover2.jpg" data-meta="">Fobee - At Night (own MP3)</a></li>
<li><a href="https://soundcloud.com/chvrches/the-mother-we-share">Chvrches - The mother we share</a></li>
</ul>

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="preview/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>

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 to it.

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

Enqueue tracks

You can enqueue tracks from an element, when you click on it or auto-enqueue a track when the player is ready.

You can enqueue tracks by adding setting the data-enqueue attribute to yes class to a track link. That will enqueue the track in the player when you click on the link.

The Jim Jones Revue - High Horse
<a href="https://soundcloud.com/jimjonesrevue/the-jim-jones-revue-high-horse" class="fap-single-track" data-enqueue="yes">The Jim Jones Revue - High Horse</a>

You can also auto-enqueue tracks when the player is ready. Just set the data-autoenqueue to yes.

Flume - Say It ft. Tove Lo (Illenium Remix)
<a href="https://soundcloud.com/illeniumofficial/flume-say-it-ft-tove-lo-illenium-remix" class="fap-single-track" data-autoenqueue="yes">Flume - Say It ft. Tove Lo (Illenium Remix)</a>

Add playlist from a single element

You can also add a playlist from a button or link easily. Just create an element, e.g. a button or a element with a data-playlist attribute. This attribute needs an unique id. Then create a list with the same data-playlist attribute. You can also enqueue the whole playlist by adding data-enqueue="yes" to the clicked element.

Add playlist to player

<a href="#" data-playlist="unique-playlist-id" data-enqueue="no" class="fap-add-playlist">Add playlist to player</a>

<ul data-playlist="unique-playlist-id">
<li><a class="fap-single-track" href="music/Fobee-Runway(envato).mp3" title="Fobee - Runway" target="http://audiojungle.net/item/runway/61202?ref=radykal" rel="preview/cover1.jpg">Fobee - Runway (own MP3)</a></li>
<li><a class="fap-single-track" href="http://soundcloud.com/thomas-gold/onerepublic-feel-again-thomas-gold-club-mix">OneRepublic - Feel Again (Thomas Gold Club Mix)</a></li>
<li><a class="fap-single-track" href="http://soundcloud.com/arnejofficial/arnej-lost">Arnej - Lost</a></li>
</ul>

Audio Sources

MP3

If you would like to use MP3 files, you can set several information via the anchor element.

  • href: The URL to the MP3 file (required)
  • title: The title for the track (required)
  • target: The share URL, which be shared via facebook and twitter.
  • rel: The URL to the cover image
  • data-meta: An unique ID to another element, that stores the HTML text for the meta element.

Fobee - Runway (own MP3)

<a class="fap-single-track" href="music/Fobee-Runway(envato).mp3" title="Fobee - Runway" target="http://audiojungle.net/item/runway/61202?ref=radykal" rel="preview/cover1.jpg" data-meta="#mp3-meta">Fobee - Runway (own MP3)</a>
<span id="mp3-meta" class="hidden">This is another <strong>meta text</strong> (optional)</span>

Soundcloud

For soundcloud tracks you only need to set the soundcloud URL in the href attribute. All information like title, cover etc. will be loaded from soundcloud.

Kokab - I Got U
<a href="https://soundcloud.com/kokabland/kokab-i-got-u-tropical-house" class="fap-single-track">Kokab - I Got U
</a>
SNAILS - #FREETHEVOMIT EP
<a href="https://soundcloud.com/officialsnails/sets/snails-freethevomit-ep" class="fap-single-track">SNAILS - #FREETHEVOMIT EP</a>
Illenium Official Tracks
<a href="https://soundcloud.com/illeniumofficial" class="fap-single-track">Illenium Official Tracks</a>

Diplo Likes
<a href="https://soundcloud.com/diplo/likes" class="fap-single-track">Diplo Likes</a>

Official.fm

Since V1.5 you can load tracks from Official.fm. You only need to set the URL of the Official.fm track in the href attribute.

Mac Miller - Love Me As I Have Loved You (prod. Ritz Reynolds)

<a href="http://official.fm/tracks/D4lw" class="fap-single-track">Mac Miller - Love Me As I Have Loved You (prod. Ritz Reynolds)</a>

Options

Option Explanation Default Value
wrapperPosition The position of the wrapper that holds the player - 'top', 'bottom' 'popup' or ID of an element. 'bottom'
mainPosition The alignment of the player - 'left', 'center' or 'right' 'center'
wrapperColor The background color of the wrapper '#f0f0f0'
mainColor The main color for the UI '#3c3c3c'
fillColor The background color for the UI buttons '#e3e3e3'
metaColor The color for some meta elements like the text under the track title '#666666'
strokeColor The color for the strokes '#e0e0e0'
twitterText The text for the twitter link 'Share on Twitter'
facebookText The text for the facebook link 'Share on Facebook'
height The height for the player without playlist 70
playlistHeight The height for the playlist 210
opened Player is opened from beginning (true) or closed (false) true
volume Enable/ disable volume bar true
playlist Enable/ disable visual playlist true
autoLoad Starts loading the track when soundmanager is ready and autoPlay is disabled true
autoPlay Starts playing as soon as the player is ready false
playNextWhenFinished Plays the next track when current one has finished true
keyboard Enable/disable the keyboard shortcuts true
socials Show/hide social links true
xmlPath The path to the XML file that holds your playlist ''
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 'popup.html'
Since V1.3:
autoPopup
Pop out the player in a Pop-Up Window automatically false
Since V1.3:
randomize
Randomize default playlist false
Since V1.3:
shuffle
Show/hide the shuffle button true
Since V1.3.1:
sortable
Make playlist sortable via Drag&Drag false
Since V1.3.1:
base64
Set this to true when you would like to use the base64_encode() PHP function, to hide the MP3 URL false
Since V1.4.2:
hideOnMobile
Hide the player on all mobile devices false
Since V1.5:
loopPlaylist
When end of playlist has been reached, start from beginning true
Since V1.5:
storePlaylist
Stores the playlist in the browser, so when the user come back to the site, he will see the same playlist since the last time. You also need to include the amplify.min.js in your document, when setting this option to true. false
Since V1.5:
layout
The layout for the player, can be fullwidth or boxed. 'fullwidth'
Since V1.6:
keepClosedOnceClosed
Keeps the player closed, once the user closed it. false
Since V1.6.1:
animatePageOnPlayerTop
Moves the whole page down when the player is at the top, so the player does not overlap anything from the page. false
Since V1.6.1:
openLabel
The label for opening the playlist. +
Since V1.6.1:
closeLabel
The label for closing the playlist. ×
Since V1.6.1:
openPlayerOnTrackPlay
Opens the player when a track starts playing. false
Since V1.6.1:
popup
Enable the pop-up player button. true
Since V1.6.1:
selectedIndex
Sets the start track by index when the player is created. 0
Since V2.0.0:
htmlURL
Sets the URL to the file containing all relevant HTML. 'html/fwap.html'
Since V2.0.0:
loadingText
Sets the loading text. 'Loading Playlist'
Since V2.0.0:
popupTitle
Sets the title of the popup player. 'Fullwidth Audio Player'
Since V2.0.0:
popupBlockerText
Sets the text for popup blocker. 'Pop-Up Music Player can not be opened. Your browser is blocking Pop-Ups. Please allow Pop-Ups for this site to use the Music Player.'
Since V2.0.0:
howlOptions
Sets some custom options for howl (audio library) https://github.com/goldfire/howler.js#core. {}
Since V2.0.0:
debug
Makes some logs in the console. false
Since V2.0.1:
soundCloudClientID
You need to register an own soundcloud app and enter your client ID to avoid rate limits https://developers.soundcloud.com/docs/api/rate-limits#play-requests. ''

Options Form








API

Method Explanation
$.fullwidthAudioPlayer.play(); Starts playing the music
$.fullwidthAudioPlayer.pause(); Pauses the music
$.fullwidthAudioPlayer.toggle(); Plays/pauses the music
$.fullwidthAudioPlayer.previous(); Plays the previous track
$.fullwidthAudioPlayer.next(); Plays the next track
$.fullwidthAudioPlayer.volume(0-1) Sets the volume for the player, a value between 0 and 1
$.fullwidthAudioPlayer.addTrack(trackUrl, title, meta, cover, linkUrl, playIt) Adds a new track to the player
Parameters:
  • trackUrl: The URL of the track
  • title: The title for the track
  • meta: Some meta information that appears under the track
  • cover: The URL of the image cover
  • linkUrl: The URL for the facebook and twitter buttons, that should be shared
  • playIt: Force playing the track after it has been added to the playlist (true) or not (false)
$.fullwidthAudioPlayer.clear(); Removes all tracks from the player and stops playing
Since 1.4.1:
$.fullwidthAudioPlayer.setPlayerPosition(state, animated);
Set the position of the player.
Parameters:
  • state: The position of the player - 'open', 'close', 'openPlaylist', 'closePlaylist'
  • animated: True for animation, false for no animation
Since 1.4.2:
$.fullwidthAudioPlayer.popUp();
When Pop-Up mode is enabled, you can call this method for popping up the player. For example with a button.
Since 1.5:
$.fullwidthAudioPlayer.selectTrack(index, playIt);
Select a track from the current playlist.
Parameters:
  • index (number): The track index that should be selected, a value between 0 and n (n = amount of tracks - 1)
  • playIt (boolean): Start playing the selected track (true) or just enqueue it (false)

Try it!



Test your own audio source:







Events

Event Explanation
'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
Example
$('#fap').bind('onFapTrackSelect', function(evt, trackData) {
//output the title of the current track
console.log(trackData.title);
});


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

© 2013 | radykal.de