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.
Note
If you already purchase it, please drop me a mail, there is already an update for it. The preview is already updated with it.
Important Information for mobile devices:
Autoplay, the volume bar and the visual playlist will be automatically set to false. 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" rel="cover1.jpg" target="http://google.de" 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
- 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();
Download Fullwidth Audio Player – jQuery plugin (Media)
Features
