Apollo - Sticky Full Width HTML5 Audio Player
Thank you for purchasing our product!
The product uses audio7_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 audio7_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">This is Freeform A</li>
<li class="xauthor">Author Name</li>
<li class="xauthorlink">https://www.domain_name.com</li>
<li class="xauthorlinktarget">_blank</li>
<li class="ximage">audio/images/p2.jpg</li>
<li class="xcategory">ALL CATEGORIES;Classic</li>
<li class="xbuy">https://www.custom_link_to_buy_section.com</li>
<li class="xlyrics">https://www.custom_link_to_lyrics_section.com</li>
<li class="xsources_mp3">audio/wm_follow_me.mp3</li>
<li class="xsources_ogg">audio/wm_follow_me.ogg</li>
</ul>
The .ogg file is optional and is a fallback for old browsers without MP3 support
'xauthorlink' is optional and allows you to define a link for the singer/author
'xauthorlinktarget' values can be '_blank" or '_self'
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, audio7_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 controller skin you want to use. For example, if you want to use "whiteControllers" controllers skin, open an example like 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: whiteControls.html) to assure you include the controller skin correctly.
<!-- must have -->
<link href="audio7_html5.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="https://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/audio7_html5.js" type="text/javascript"></script>
<!-- must have -->
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: whiteControls.html) to assure you include the controller skin correctly.
<div class="audio7_html5">
<audio id="audio7_html5_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>
| 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, shuffle, download, facebook, twitter, 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: |
| responsive |
false | Possible values: true - the player will responsive false - the player will not be responsive |
| sticky | true | Possible values: true - the audio player will be positioned on the bottom of the page beeing fixed while the page scrolls false - the audio player will NOT be positioned on the bottom of the page beeing fixed while the page scrolls |
| 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. |
| initialVolume |
1 | You can initialize the volume. The range is 0 to 1 |
| autoPlay | true | 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 | '#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' | Timer color (hexa) |
| songTitleColor | '#a6a6a6 | Audio file Title text area color (hexa) which resides next to the image |
| songAuthorColor | '#ffffff' | Audio file Author text area color (hexa) which resides next to the image |
| barsColor | '#ffffff' | The bars animation color |
| facebookAppID | '' | FaceBook AppID. Please check Facebook Share section, for more informations |
| facebookShareTitle | 'Apollo HTML5 Audio Player' | The title which will appear on FaceBook share. Please check Facebook Share section, for more informations |
| facebookShareDescription | 'A top-notch responsive HTML5 Audio Player compatible with all major browsers and mobile devices.' | The description which will appear on FaceBook share. Please check Facebook Share section, for more informations |
| pathToDownloadFile | '' | The path to the download.php file. You can ignore this parameter if you'll leave the download.php file in the same folder as the .html file. If you want to use a different arhitecture for the audio player files, apply this parameter to add the url to the download.php file. Ex: http://www.yourwebsite.com/some_path/ |
| googleTrakingOn | false | Possible values: true - Google Analytics tracking will be enabled false - Google Analytics tracking will be disabled |
| googleTrakingCode | '' | Your Google Analytics code. Example: UA-3245593-1 |
| popupWidth | 1100 | The initial popup window width |
| popupHeight | 500 | The initial popup window height |
| Controllers Settings: Show/Hide buttons & elements | ||
| showVinylRecord | true | Possible values: true - the vinyl record animation will appear false - the artist image defind in the playlist, will appear. Example: <li class="ximage">audio/images/p1.jpg</li> |
| showRewindBut | true | Possible values: true - rewind button will appear false - rewind button will not appear |
| showNextPrevBut | true | Possible values: true - next & previous buttons will appear false - next & previous buttons will not appear |
| showShuffleBut | true | Possible values: true - shuffle button will appear false - shuffle button will not appear |
| showDownloadBut | true | Possible values: true - download button will appear false - download track 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 |
| showBuyBut | true | Possible values: true - buy lyrics will appear false - buy lyrics button will not appear |
| buyButTitle | 'Buy Now' | The lyrics button title |
| buyButTarget | '_blank' | Possible values: '_blank' - the buy link will open in a new window '_self'- the buy link will open in the same window |
| showLyricsBut | true | Possible values: true - twitter button will appear false - twitter button will not appear |
| lyricsButTitle | 'Lyrics' | The buy button title |
| lyricsButTarget | '_blank' | Possible values: '_blank' - the lyrics link will open in a new window '_self'- the buy lyrics will open in the same window |
| 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 |
| showPopupBut | true | Possible values: true - the popup button will appear false- the popup button 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 | '#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 | 18 | 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 |
| showSearchArea | true | Possible values: true - the search area will appear false - the search area will not appear |
| searchAreaBg | '#333333' | Search area background color (hexa) |
| searchInputText | 'search...' | Search input initial text, useful for translation purpose |
| searchInputBg | '#ffffff' | Search input background color (hexa) |
| searchInputBorderColor | '#333333' | Search input border color (hexa) |
| searchInputTextColor | '#333333' | Search input text color (hexa) |
| searchAuthor | true | Possible values: true - it will search in author filed, too false - it will not search in author filed |
| 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 |
| selectedCategBg | '#333333' | Selected category background color (hexa) |
| selectedCategOffColor | '#FFFFFF' | Selected category color (hexa) - OFF state |
| selectedCategOnColor | '#00b4f9' | Selected category color (hexa) - ON state |
| selectedCategMarginBottom | 12 | Selected category bottom margin |
| categoryRecordBgOffColor | '#191919 | Category item background color (hexa) - OFF state |
| categoryRecordBgOnColor | '#252525 | Category item background color (hexa) - ON state |
| categoryRecordBottomBorderOffColor | '#2f2f2f | Category item bottom border color (hexa) - OFF state |
| categoryRecordBottomBorderOnColor | '#2f2f2f | Category item bottom border color (hexa) - ON state |
| categoryRecordTextOffColor | '#4c4c4c | Category item text color (hexa) - OFF state |
| categoryRecordTextOnColor | '#00b4f9 | Category item text color (hexa) - ON state |
Example of usage:
jQuery('#audio7_html5_white').audio7_html5({
skin: 'whiteControllers',
playerWidth:500,
autoPlay:true
});
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 "Add a 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('#audio7_html5_white').audio7_html5({
skin: 'whiteControllers',
facebookAppID:'YOUR_NEW_APPID',
playerWidth:500,
autoPlay:true
});
4. Go to Settings->Basic tab (left area), select 'Website' and insert your website URL and fill all the other information. Below you have a demo screenshot. Of course, you'll use your own info.
5. Go to Settings->Advanced tab (left area) and activate 'Social Discovery'
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
How To Implement Google Analytics
1. In <head> section of your webpage, add this code:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
</script>
2. When you initialize the player, set googleTrakingOn:true and add the Google Analytics code using 'googleTrakingCode' parameter. Example:
jQuery('#audio7_html5_white').audio7_html5({
skin: 'whiteControllers',});
googleTrakingOn:true,
googleTrakingCode:'YOUR GOOGLE ANALYTICS CODE'
YOUR GOOGLE ANALYTICS CODE will looks something like this: UA-3245593-1
3. To check the results in Google Analytics, go to Behavior->Events->Overview
You can check there, at the bottom of the page, 'Event Category' and 'Event Label' sections
Automatically generate the player playlist by reading the folder which contains the MP3 files
The file which generates the playlist from a folder which contains the MP3 files, is 'lbg_dir.php'. You need to run this file on a server or virtual server.
Please check this video tutorial https://www.youtube.com/watch?v=1t195KV3LT8
You can load a new song by adding a javascript function to a button on the page.
jQuery.audio7_html5.changeMp3('mp3_url','song_name','song_author','image_url');
Example: