Getting Started

Starting with screencasts

Watch a Getting Started video to learn how the plugin is working.
Thanks to Jonathan Salontay, who created 2 super-b Video Tutorials:

Starting with reading

Installation

First of all upload the ‘fullwidth-audio-player’ folder/zip the to your wordpress plugin directory and activate it in your Plugins page. If you do not know how do that – just google it. There are a many tutorials that explain how you do that.After that a new Menu will appear in your Main Navigation. There you create all tracks, playlists and configurate all settings for the player.

 

Since V2.0.1 – Using tracks from SoundCloud

You have to register an own SoundCloud app and copy the Client ID in the SoundCloud Client ID option in the audio player options to use tracks from SoundCloud.

 

Create some tracks

First of all lets create some tracks. You can upload own hosted MP3 tracks or use tracks from soundcloud. Lets begin with own hosted tracks. Click ‘Add New’ under the Fullwidth Audio Player menu.

 

Own MP3 tracks

First enter a title for your track. Then set the track URL in the Track URL field or use the wordpreess uploader to upload a MP3 file.
Before you click ‘Insert into Post’, be sure that ‘File URL’ is enabled. You see that when the correct path of the MP3 file is displayed in the Link URL field.
Now you can also write a description, set an order value for sorting the tracks in a playlist. You can upload a cover for the track via the ‘Featured Image’ Link. When you are done, just click ‘Publish’.

 

Soundcloud Tracks

You can load single tracks, track sets, user tracks and user favorites from soundcloud. Just paste the URL in the Track URL field. The player will get the track details like title, referral link etc. from soundcloud. You can set also a title, description, image etc. but these information will be only used when you add a tracklist or single track anywhere in your post or page.

For example you would like to add your favorites from soundcloud, then paste this link in the track URL field:

 

Playlists

You can create your own playlists and set a default playlist for the player or add it anywhere in your post or page.
For creating own playlists, just click the ‘Playlists’ menu and create a playlist, after that you can pass your tracks to this playlist via the meta box that appears when creating or editing a track.

 

Select a default playlist

Go to the Options page and select the Audio Player tab, in the first dropdown you can define a default playlist, that will be loaded into the player from beginning.

 

Change default playlist for particular pages

Via the shortcode creator you can also change the default playlist for particular pages. Just select “Default Playlist” from the dropdown and choice a playlist.

 

In-Page Playlists & Tracks

You can choice between 4 different layouts: Cover Grid, Cover List, Grid-Interactive Image, Simple List or Hidden List. You set the layout in the attribute of the shortcode.

You can also automatically enqueue a playlist or track when the player is ready, just set the enqueue attribute to yes:

You can add an additional parameter to the shortcode to tell the player to play the tracks(s) directly after adding or just enqueue them. If you set button_enqueue to "yes", it will only enqueue the track(s) in the player, if you set it to "no", it will play the track(s).

 

Add a single track

When you click the ‘All Tracks’ menu, you find a column ‘Shortcode’ in the table. Every track has his own shortcode and this can be added to a post or page, just copy the shortcode and paste it anyhwere in your post or page.

 

Add a playlist

When you write a post or page, you see a new meta box at the right.
Select a playlist and configurate the settings by your wishes. When you are done, just click the ‘Add playlist’ button. Be sure to be that the editor is in the Visual Mode, otherwise the shortcode will not be added.

 

Web Audio vs HTML5 Audio

You can decide if you want to use Web Audio or HTML5 Audio. You can toggle between Web Audio and  HTML5 audio API in the audio player options, but depending on your requirements you have to decide for an audio API wisely.

Web Audio API

  • Buffering is working
  • Large audio files need to be loaded fully to start playing

HTML5 Audio API (Default)

  • The next track will not be played automatically on mobile devices
  • Adding a SoundCloud Track from an in-page element does not play it directly, you have to click on Play Button in the player
  • No buffering

 

Shortcodes

Here is a detailed overview of all shortcodes that can be used with this plugin.
Activate player for a page: [fap]
Single track: [fap_track id="ID OF THE TRACK" laylout="list/grid/simple/hidden/interactive-image" enqueue="yes/no" auto_enqueue="yes/no"]
Playlist: [fap_playlist id="ID OF THE PLAYLIST" laylout="list/grid/simple/hidden/interactive-image" enqueue="yes/no" play_playlist_button="empty/text for the button" auto_enqueue="yes/no"]
Changing the default playlist for a particular page: [fap_default_playlist id="ID OF THE PLAYLIST"]
Pop-Up Button:[fap_popup_button label="LABEL FOR THE BUTTON"]
Clear Button:[fap_clear_button label="LABEL FOR THE BUTTON" css_class="YOUR_CSS_CLASS"]

 

 

Important information for the Pop-Up Player

When you enable the Auto Pop-Up option, users with a Pop-Up Blocker will be notified to allow your sites for Pop-Ups. The Pop-Up player is only available on desktop browsers, not on mobile browsers.