RESPONSIVE HTML5 AUDIO PLAYER PRO

Thank you for purchasing our product!

 


Files Structure

css file

The product uses theplayer.css file which contains the controllers skin classes

controllers folder

The images used by the controllers skin are located in this folder and distributed in subfolders with the controller skin name.

js folder

All the .js files are located in this folder. The product uses jquery. The product is generated by theplayer.js

audio folder

We've put all the audio files in this folder.

html files

For your convenience we've created for each controller skin and example a .html file. In each file you'll find all the necessary code for implementation.

 


Playlist & Categories

The playlist resides inside <div class="xaudioplaylist"> ... </div> element

Each playlist item is defined by this code:

<ul>
<li class="xtitle">This is Freeform A</li>
<li class="xauthor">Author Name</li>
<li class="ximage">audio/images/p2.jpg</li>
<li class="xcategory">ALL CATEGORIES;Classic</li>
<li class="xsources_mp3">audio/wm_follow_me.mp3</li>
<li class="xsources_ogg">audio/wm_follow_me.ogg</li>
</ul>

For each audio file you have to define (and create) 2 file extensions: .mp3 & .ogg

 

Each playlist item can belong to multiple categories, separated by ;

Example: <li class="xcategory">ALL CATEGORIES;Classic;Jazz</li>

 


HTML/JS code for implementation

Step 1: Copy on your server/project the following files and folders: audio, js, controllers, theplayer.css. Of course you can move the files in other folders, but you'll take care to correct the paths to the files
Step 2: Open the .html file associated with the example you want to use. For example, if you want to use Example 1, open an example like example1.html
Step 3: Put the below code in the <head> section of your file. This code has to be copied from the <head> section of the file you've opened (EX: example1.html)

<!-- must have -->
<link href="theplayer.css" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="js/theplayer.js" type="text/javascript"></script>
<!-- must have -->

<script>
jQuery(function() {

jQuery('#theplayer_white').theplayer({
playerWidth:450,
autoPlay:true
});

});
</script>

Step 4: In the <body> section copy the code below. This code has to be copied from the <body> section of the file you opened (EX: example1.html)

<div class="theplayer">
<audio id="theplayer_white" preload="metadata">
<div class="xaudioplaylist">
<ul>
<li class="xtitle">This is Freeform A</li>
<li class="xauthor">Author Name</li>
<li class="ximage">audio/images/p1.jpg</li>
<li class="xcategory">ALL CATEGORIES;Classic</li>
<li class="xsources_mp3">audio/wm_follow_me.mp3</li>
<li class="xsources_ogg">audio/wm_follow_me.ogg</li>
</ul>

<ul>
<li class="xtitle">Follow Me Here B</li>
<li class="xauthor">Author Name</li>
<li class="ximage">audio/images/p2.jpg</li>
<li class="xcategory">ALL CATEGORIES;Rick</li>
<li class="xsources_mp3">audio/adg3com_freeform.mp3</li>
<li class="xsources_ogg">audio/adg3com_freeform.ogg</li>
</ul>

</div>
No HTML5 audio playback capabilities for this browser. Use <a href="https://www.google.com/intl/en/chrome/browser/">Chrome Browser!</a>
</audio>
</div>

 

 


JS Options

Attribute Default Value Description
General settings
responsive
true Possible values:
true - the player will responsive
false - the player will not be responsive
playerWidth 450 player width
initialVolume
0.5 You can initialize the volume. The range is 0 to 1
autoPlay false Possible values:
true - autoplays audio file
false - doesn't autoplay audio file
loop true 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 false Possible values:
true - the playlist will be played in shuffle mode
false - the playlist will be played in normal mode
playerBg '#FFFFFF' Player background color (hexa)
playerBorderRadius 10 The player border radius
imageBorderRadius 5 The player image border radius
imageWidth 130 image width
imageHeight 73 image height
bufferEmptyColor '#737373' Player buffer color (hexa)- empty state
bufferFullColor '#bababa' Player buffer color (hexa) - full state state
seekbarColor '#000000' Seekbar color (hexa)
volumeOffColor '#bababa' Volume slide color (hexa) - off state
volumeOnColor '#000000' Volume slide color (hexa) - on state
timerColor '#000000' Timer color (hexa)
songTitleColor '#000000' Audio file Title text area color (hexa) which resides next to the image
songAuthorColor '#888888' Audio file Author text area color (hexa) which resides next to the image
facebookAppID '1034742783262365' FaceBook AppID. Please check Facebook Share section, for more informations
facebookShareTitle 'ThePlayer - HTML5 Audio Player' The title which will appear on FaceBook share. Please check Facebook Share section, for more informations
facebookShareDescription 'A responsive HTML5 Audio Player with playlist and categories.' The description which will appear on FaceBook share. Please check Facebook Share section, for more informations
     
Controllers Settings: Show/Hide buttons & elements
showRewindBut true Possible values:
true - rewind button will appear
false - rewind button will not appear
showShuffleBut true Possible values:
true - shuffle button will appear
false - shuffle button will not appear
showFacebookBut true Possible values:
true - facebook button will appear
false - facebook button will not appear
showTwitterBut true Possible values:
true - twitter button will appear
false - twitter button will not appear
showAuthor true Possible values:
true - audio track Author will appear
false - audio track Author will not appear
showTitle true Possible values:
true - audio track Title will appear
false - audio track Title will not appear
showPlaylistBut true Possible values:
true - show/hide playlist button will appear
false - show/hide playlist button will not appear
     
Playlist Settings
showPlaylist true Possible values:
true - playlist will appear
false - playlist will not appear
showPlaylistOnInit true Possible values:
true - playlist will appear on init
false - playlist will not appear on init
playlistTopPos 2 Playlist distance from the audio player
playlistBgColor '#FFFFFF' Playlist background color (hexa)
playlistRecordBgOffColor '#FFFFFF' Playlist item background color (hexa) - OFF state
playlistRecordBgOnColor '#FFFFFF' Playlist item background color (hexa) - ON state
playlistRecordBottomBorderOffColor '#cccccc' Playlist item bottom border color (hexa) - OFF state
playlistRecordBottomBorderOnColor '#8d8d8d Playlist item bottom border color (hexa) - ON state
playlistRecordTextOffColor '#777777' Playlist item text color (hexa) - OFF state
playlistRecordTextOnColor '#000000' Playlist item text color (hexa) - ON state
numberOfThumbsPerScreen 7 Number of items shown in the playlist. You'll have to scroll to see the rest
playlistPadding 13 Playlist inner padding
showPlaylistNumber true Possible values:
true - the item number in the playlist will appear
false - the item number in the playlist will not appear
     
Category Settings
showCategories true Possible values:
true - the categories will appear
false - the categories will not appear
firstCateg '' The name of the first displayed category (in the top of the playlist). If no value is selected, since the categories will be alphabetically ordered, the first one will be displayed as the first selected category
selectedCategOffColor '#333333' Selected category color (hexa) - OFF state
selectedCategOnColor '#f90000' Selected category color (hexa) - ON state
selectedCategMarginBottom 12 Selected category bottom margin
categoryRecordBgOffColor '#eeeeee Category item background color (hexa) - OFF state
categoryRecordBgOnColor '#f7f7f7' Category item background color (hexa) - ON state
categoryRecordBottomBorderOffColor '#d0d0d0' Category item bottom border color (hexa) - OFF state
categoryRecordBottomBorderOnColor '#d0d0d0' Category item bottom border color (hexa) - ON state
categoryRecordTextOffColor '#8d8d8e' Category item text color (hexa) - OFF state
categoryRecordTextOnColor '#df0611' Category item text color (hexa) - ON state
     

Example of usage:

jQuery('#theplayer_white').theplayer({
playerWidth:450,
autoPlay:true
});

 

 


FaceBook Share

In order for the Facebook share button to work you need to obtain a Facebook Application ID

1. Go to theĀ Facebook Developers Apps page and and sign in with your Facebook username and password.

2. Click the "Create New App" button.

If you do not see the option to create a new app in the upper right hand corner, click on "Register as Developer."

3. After that you'll obtain an 'App ID' which you'll paste in facebookAppID parameter when you'll initialize the player

jQuery('#theplayer_white').theplayer({
facebookAppID:'YOUR_NEW_APPID',
playerWidth:450,
autoPlay:true
});

4. Go to Settings tab (left area), click '+Add Platform' button, select 'Website' and insert your website URL

facebook appid

5. Go to Status & Review and set 'YES' for 'Do you want to make this app and all its live features available to the general public?'

facebook appid

 

6. To personalize more the share content you can use facebookShareTitle and facebookShareDescription parameters when you initialize the player. Please check JS Options section, to see all available parameters