MP3 Sticky Player Documentation

This is the documentation of the WordPress plugin for MP3 Sticky Player

Getting Started

MP3 Sticky Player is a powerful and extremely customizable responsive mp3 / mp4, audio & video player that is using playlists to play local, self hosted or streaming audio & video files, HLS / m3u8, Youtube, Podcasts, Itunes Podcasts, SoundCloud, Shoutcast & Icecast radio, Google Drive, Amazon S3 and much more.

Please note that the MP3 Sticky Player Wordpress Plugin installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, so please go through the entire help file and watch the video tutorial before trying to install it into your own Wordpress site.

MP3 Sticky Player is compatible with any WordPress theme and it has no dependencies.


Installation

After purchasing the plugin from CodeCanyon, inside the main zip file you will find installable plugin fwdmsp.zip, video tutorial

Installation steps

  • 1. In your WordPress Admin Dashboard, go to Plugins > Add New.
  • 2. Upload the fwdmsp.zip plugin file that you downloaded from CodeCanyon.
  • 3. Click on install now.
  • 4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings or playlists, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.


Usage

The plugin is constructed of three sections, the preset settings which is used to create presets and modify the player functionality, the playlist section wich is used to create playlists and add your tracks in them and the CSS section which is used to update surten CSS aspects of the plugin for example the tracks text color.

Plase note that I have created a detailed video tutorial explaning everything you need to know about how to install and use the plugin, so I encourage you to watch it from start to end.


Presets

Frist step is to create your own preset, just enter your preset name in the preset name input and click on the Add preset button, after this you will have access to an Update preset button that allows to save the modified preset settings. Please note all preset settings are self explanatory and the ones that need more information have a tooltip attached to them.


Playlists

Next step is to create your own playlist by clicking on the Add new main playlist button and give the main playlist a name.

To create a normal playlist that allows to add mixed tracks types click on the Add new playlist button, give the new playlist a name and add it. In the newely created playlist it is possible to add as many tracks as you want.

The other playlist types are self explanatory when using the backend to add them you will be prompted with a dialog popup that has information about how to add them. I also explain all types in detail in this video tutorial.


Shortcode

After the preset and playlist are created use the shortcode generator to add the player in your page, post or custom post.


Resources

This section contains useful resorces and information about the plugin usage and it's features.


Shoutcast

Using shoutcast is best exmplained in a video tutorial, pelase watch it from start to end.


Google Drive

For this I have created a video tutorial, pelase watch it from start to end.

https://www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4][.mp3]

Example of working .mp4 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZNHNtZTlXUm1UUUE?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp4 and mp3 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZVG0zc2pzalVCVjg?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp3 .


Dropbox

Copy the drop box video or audio link, then replace www.dropbox.com with dl.dropboxusercontent.com.

Thus the URL: https://www.dropbox.com/s/abcd/file.mp4?dl=0&type=.mp3 will become: https://dl.dropboxusercontent.com/s/acbd/file.mp4?dl=0&type=.mp3 . If you are using mp4 files change the type to .mp4 like this &type=.mp4 .


Google analytics

Please watch this video tutorial for more info.


API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the player externally.

You can access the player instances by their order in the page with the "fwdmspPlayer" name with its order after it, starting from 0. For example if you have 2 instances their names are "fwdmspPlayer0" and "fwdmspPlayer1". Here is an example how to use the API in the Wordpress editor or in a code section of your page:

<script type="text/javascript">
    FWDMSPUtils.onReady(function(){
		fwdmspPlayer0.addListener(FWDMSP.READY, onReady);
		fwdmspPlayer0.addListener(FWDMSP.PLAY, onPlay);
	});

	function onReady(){
		console.log("player ready");
	}

	function onPlay(){
		console.log("current playing track id: " + fwdmspPlayer0.getTrackId());
	}
	
	function playNextTrack(){
		fwdmspPlayer0.playNext();
	}
</script>
<!-- Add a button -->
<button onclick="playNextTrack()">Play next track</button>

Methods:

addTrack

addTrack(source:String, title:String, thumbPath:String, duration:String, addAtTheBegginngOfPlaylist:Boolean, download:Boolean, buy:String):void

Add a track in the playlist at runtime.

  • source (String - required) -the track src.
  • title (String - required) - the track title.
  • thumbPath (String - required) - the thumbnail image src.
  • duration (String - required) - the track duraton with this format hours:minutes:seconds for example (00:06:14).
  • addAtTheBegginngOfPlaylist (Boolean - required) - this can be true or false, it allows to add the track at the beggining or end of the playlist.
  • download (Boolean - optional) - make track downloadable.
  • buy (String - optional) - this can be URL that will be opened when the buy button is clicked or a javascript function that you can call when the buy button is clicked, for example buyCustomFunction(), if you don't need a buy button just set this to "".

loadPlaylist

loadPlaylist(playlistId):void

Load a playlist based on id.

  • playlistId (Number - required) -the playlist id, the count starts from 0.

popup

popup():void

Pop-up playler in a new window.

showPlayer

showPlayer():void

Shows the entire player.

hidePlayer

hidePlayer():void

Hides the entire player.

showCategories

showCategories():void

Show the playlists selector window.

showPlaylist

showPlaylist():void

Show the playlist.

hidePlaylist

hidePlaylist():void

Hide the playlist.

getCurrentTime

getCurrentTime():String

Returns the track current time.

getDuration

getDuration():String

Returns the total track duration.

setVolume

setVolume(Number):void

Set the audio volume, this method accepts a parameter that represents a number between 0 (audio mute state) and 1 (audio maximum volume).

scrub

scrub(val:Number):void

Notify instance to scrub (set the audio position), this method accepts a parameter that represents

  • val (Number - required) - a number between 0 (audio start position) and 1 (audio end position).

playSpecificTrack

playSpecificTrack(playlistId:Number, trackId:Number):void

Play a specific track from a playlist.

  • playlistId (Number - required) -the playlist id, the count starts from 0.
  • trackId (Number - required) - the track id, the count starts from 0.

stop

stop():void

Stops the playback and the loading process if the loading process has started.

play

play():void

Start / play playback.

pause

pause():void

Pause the playback.

playPrev

playPrev():void

Play previous track.

playNext

playNext():void

Play next track.

playShuffle

playShuffle():void

Play shuffle/random track.

setPlaybackRate

setPlaybackRate(rate:Number):void

Set the playback rate / speed.

  • rate (Number - required) - the rate argument can be a number betweem 0.5 and 3 where 1 is normal rate /speed.

scrubbAtTime

scrubbAtTime(time:String):void

Scrub at a specified time

  • time (String - required) - time in format hour:minutes:seconds for example 00:01:30.

getIsAPIReady

getIsAPIReady():void

Returns the API state, true if ready, false if not.

getCatId

getCatId():Number

Returns the current category id, the counting starts form 0.

getTrackId

getTrackId():Number

Returns the current track id, the counting starts form 0.

getTrackTitle

getTrackTitle():String

Returns the current track title.


Events:

ready

FWDMSP.READY

Dispatched when the MP3 Sticky Player instance API is actually available.

start

FWDMSP.START

Dispatched when the Mp3 playing has started playing.

popup

FWDMSP.POPUP

Dispatched when the player is pop-uped in a new window.

error

FWDMSP.ERROR

Dispatched when the MP3 Sticky Player instance can't load or play the source.

  • error (String) - the error message, ex:e.error.

startToLoadPlaylist

FWDMSP.START_TO_LOAD_PLAYLIST

Dispatched when the playlist loading is starts.

playlistLoadCompleteHandler

FWDMSP.LOAD_PLAYLIST_COMPLETE

Dispatched when the playlist loading is complete.

stop

FWDMSP.STOP

Dispatched when the MP3 Sticky Player instance is stopped.

play

FWDMSP.PLAY

Dispatched when the MP3 Sticky Player instance playback start to play.

pause

FWDMSP.PAUSE

Dispatched when the MP3 Sticky Player instance playback is paused.

update

FWDMSP.UPDATE

Dispatched when the MP3 Sticky Player instance is playing and it's position is changing (useful to update a custom scrub bar), this event has a property of type number between 0 (audio start position) and 1 (audio end position).

  • percent (Number) - the update percent, ex:e.percent.

updateTime

FWDMSP.UPDATE_TIME

Dispatched when the MP3 Sticky Player instance current duration is changing. This event has two properties of type string curTime and totalTime.

  • curTime (String) - the current time, ex:e.curTime.
  • totalTime (String) - the total time time, ex:e.totalTime.

playComplete

FWDMSP.PLAY_COMPLETE

Dispatched when the MP3 Sticky Player instance playback has reached the end of the audio file.


Notes

I've been working on this plugin since 2006 and I will continue to improve it and add new features, during this time, I got very good at supporting MP3 Sticky Player, understanding my clients, adding new features and fix bugs that are inevitable in this crazy WEB world.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.