STICKY HTML5 MUSIC PLAYER WITH CONTINUOUS PLAYBACK
Thank you for purchasing our product!
The product uses audio3_html5.css file which contains the controllers skin classes
The images used by the controllers skin are located in this folder and distributed in subfolders with the controller skin name.
All the .js files are located in this folder. The product uses jquery. The product is generated by audio3_html5.js
We've put all the audio files in this folder.
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.
The playlist resides inside <div class="xaudioplaylist"> ... </div> element
Each playlist item is defined by this code:
<ul>
<li class="xtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li class="xauthor">Author Composuit</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
HTML/JS code for implementation
Step 1: Copy on your server/project the following files and folders: audio, js, controllers, audio3_html5.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 color skeme you want to use (or to start from). For example: whiteControllers.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: whiteControllers.html) to assure you include the controller color skeme correctly.
<!-- must have -->
<link href="audio3_html5.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/audio3_html5.js" type="text/javascript"></script>
<!-- must have -->
<script>
jQuery('#audio3_html5_white').audio3_html5({
skin: 'whiteControllers',</script>
playerPadding:7,
autoPlay:true,
playlistPadding:0,
playlistBgColor:'#000000',
playlistRecordBgOffColor:'#000000',
playlistRecordBgOnColor:'#000000',
playlistRecordBottomBorderOffColor:'#323232',
playlistRecordBottomBorderOnColor:'#323232',
playlistRecordTextOffColor:'#7b7b7b',
playlistRecordTextOnColor:'#0cbbfe',
});
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: whiteControllers.html) to assure you include the controller skin correctly.
<div class="audio3_html5_bottom_div">
<div class="audio3_html5">
<audio id="audio3_html5_white" preload="metadata">
<div class="xaudioplaylist">
<ul>
<li class="xtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li class="xauthor">Author Composuit</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">Duis aute irure dolor in reprehenderit</li>
<li class="xauthor">Author Somniare</li>
<li class="xsources_mp3">audio/adg3com_crypticpsyche.mp3</li>
<li class="xsources_ogg">audio/adg3com_crypticpsyche.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>
</div>
Attribute | Default Value | Description |
General settings | ||
skin | 'whiteControllers' | The audio player comes with 2 predefined controllers skins (white and black). By controllers we understand rewind, play, pause, previous, next, volume , show/hide playlist buttons. These buttons are saved as .png images. If you need another color for these controllers, you have the PSD files included and you can save over one skin, the controllers with another color.
Possible values: |
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 |
playerPadding | 5 | Player inner padding |
playerBg | '#000000' | Player background color (hexa) |
bufferEmptyColor | '#929292' | Player buffer color (hexa)- empty state |
bufferFullColor | '#454545' | Player buffer color (hexa) - full state state |
seekbarColor | '#ffffff' | Seekbar color (hexa) |
volumeOffColor | '#454545' | Volume slide color (hexa) - off state |
volumeOnColor | '#ffffff' | Volume slide color (hexa) - on state |
timerColor | '#ffffff' | Ttimer color (hexa) |
songAuthorTitleColor | '#ffffff' | Audio file Author and Title text area color (hexa) which resides below seekbar |
continuouslyPlayOnAllPages | true | 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. |
playerAdditionalBottomMargin | 1 | Additional Bottom Margin for the player position |
playerAdditionalLeftMargin | 1 | Additional Left/Right Margin for the player position |
playerPossition | 'left' | Player position. Possible values: - left |
startMinified | true | Possible values: true - the player will be loaded in minimized form false - the player will be loaded in maximized form |
Controllers Settings: Show/Hide buttons & elements | ||
showPreviousBut | true | Possible values: true - previous track button will appear false - previous track button will not appear |
showNextBut | true | Possible values: true - next track button will appear false - next track button will not appear |
showShuffleBut | true | Possible values: true - shuffle button will appear false - shuffle button will not appear |
Playlist Settings | ||
playlistTopPos | 2 | Playlist distance from the audio player |
playlistBgColor | '#000000' | Playlist background color (hexa) |
playlistRecordBgOffColor | '#000000' | Playlist item background color (hexa) - OFF state |
playlistRecordBgOnColor | '#333333' | Playlist item background color (hexa) - ON state |
playlistRecordBottomBorderOffColor | '#333333' | Playlist item bottom border color (hexa) - OFF state |
playlistRecordBottomBorderOnColor | '#FFFFFF' | Playlist item bottom border color (hexa) - ON state |
playlistRecordTextOffColor | '#777777' | Playlist item text color (hexa) - OFF state |
playlistRecordTextOnColor | '#FFFFFF' | 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 | 4 | 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 |
Example of usage:
jQuery('#audio3_html5_white').audio3_html5({
skin: 'whiteControllers',
playerPadding:5,
autoPlay:true
});