Sticky HTML5 Music Player WordPress Plugin

This plugin requires at least WordPress 3.0

 

Video Tutorials

Installation – https://www.youtube.com/watch?v=Iwkfnn_TlP0
How To Create A New Player And Manage The Settings – https://www.youtube.com/watch?v=0vRIqEuaM4Q
How To Manage The Playlist – https://www.youtube.com/watch?v=Xl1AWvMoLlQ
How To Insert The Shortcode – https://www.youtube.com/watch?v=ubYsOSGyaEI
How To Insert Activate The Player For All Website Pages – https://www.youtube.com/watch?v=vUfMWCwCqxU
How To Automatically generate the player playlist by reading the folder which contains the MP3 files – https://www.youtube.com/watch?v=FKtzN_YSCr4

 

Plugin Instalation

Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive lbg-audio3-html5.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In your page just add the shortcode: [lbg_audio3_html5 settings_id='1']
click here for more details regarding the shortcode

 

Files & Folders Structure

css the folder contains the .css files used by the pluging
images the folder contains the images used by the pluging
js the folder contains the .js files used by the pluging
audio3_html5 the folder contains the .js & .css files that the audio player use
tpl the folder contains the template files used by the pluging
lbg-audio3-html5.php the plugin itself
   

 

Manage Players

From this section you can define the players.
If you need to include multiple players in your pages with different settings and playlist you can define the players and manage the settings for each one.
If you need only one player in your website, just edit the default one.

 

Player Settings

From this section you can define the audio player settings.

General Settings
Skin Name Available skins:
- whiteControllers
- blackControllers
Loop Possible values:
true - autoplays audio file
false - doesn't autoplay audio file
Auto Play Possible values:
true - starts next audio file after current audio file has finished
false - doesn't start next audio file after current audio file has finished
Shuffle Possible values:
true - the playlist will be played in shuffle mode
false - the playlist will be played in normal mode
Initial Volume Value the initial volume value. It takes values between 0-1
Player Padding Player inner padding
Player Background Player background color (hexa)
Empty Buffer Color Player buffer color (hexa)- empty state
Full Buffer Color Player buffer color (hexa) - full state state
SeekBar Color Seekbar color (hexa)
Volume Off State Color Volume slide color (hexa) - off state
Volume On State Color Volume slide color (hexa) - on state
Timer Color

Timer color (hexa)

Song Author or Title Color Audio file Author and Title text area color (hexa) which resides below seekbar
Show Previous Button Possible values:
true - previous track button will appear
false - previous track button will not appear
Show Next Button Possible values:
true - next track button will appear
false - next track button will not appear
Show Shuffle Button Possible values:
true - shuffle button will appear
false - shuffle button will not appear
Continuous Playback Possible values:
true - When you'll change the page, the player will continue from the previous minute. Also, the volume will remain as previously set. This will ensure a smooth playback across your entire webiste.
false - When you'll change the page, the player will NOT continue from the previous minute.
Player Additional Bottom Margin Additional Bottom Margin for the player position
Player Additional Left/Right Margin Additional Left/Right Margin for the player position
Player Possition

Player position. Possible values:
- left
- center
- right

Start Minimized Possible values:
true - the player will be loaded in minimized form
false - the player will be loaded in maximized form
Activate For Footer Possible values:
true - the player will be added in the website footer and it will be present on all pages
false - the player will be added in the website footer and it will be present only on the pages where the shortcode has been added
Preload Possible values:
metadata
auto
none
   
Playlist Settings
Playlist Top Position Playlist distance from the audio player
Playlist Background Color Playlist background color (hexa)
Playlist Record Background Off Color Playlist item background color (hexa) - OFF state
Playlist Record Background Off Color Playlist item background color (hexa) - ON state
Playlist Record Bottom Border Off Color Playlist item bottom border color (hexa) - OFF state
Playlist Record Bottom Border On Color Playlist item bottom border color (hexa) - ON state
Playlist Record Text Off Color Playlist item text color (hexa) - OFF state
Playlist Record Text On Color Playlist item text color (hexa) - ON state
NumberOf Thumbs Per Screen Number of items shown in the playlist. You'll have to scroll to see the rest
Playlist Padding Playlist inner padding
Show Playlist Number Possible values:
true - the item number in the playlist will appear
false - the item number in the playlist will not appear
   

 

Playlist

Title audio file title
Author audio file author
MP3 file (Chrome, IE, Safari) .mp3 file name.
OGG (Firefox & Opera) .ogg file name.
   

 

.htaccess

If you need to increase the wordpress media library upload file size limit add the following definitions in the .htaccess file

<IfModule mod_php5.c>
php_value post_max_size 10M
php_value upload_max_filesize 40M
php_value memory_limit 500M
</IfModule>

 

ShortCode

The shortcode is:
[lbg_audio3_html5 settings_id='1']
where
settings_id is the player ID defined in "Manage Players" section