Requested · 15/01/2022

Download Audio Player HTML5 v3.4 – euforya.net

Audio Player HTML5 v3.4

screenshot
Audio Player HTML5 v3.4
description

CHAMELEON HTML5 AUDIO PLAYER WITH/WITHOUT PLAYLIST

Thank you for purchasing our product!

 

 


Files Structure

css file

The product uses audio1_html5.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 audio1_html5.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

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=”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, audio1_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 whiteControllersTYPE.html. Ex: whiteControllersWithPlaylistEx1.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: whiteControllersWithPlaylistEx1.html) to assure you include the controller skin correctly.

<!– must have –>
<link href=”audio1_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/audio1_html5.js” type=”text/javascript”></script>
<!– must have –>

<script>
jQuery(function() {

jQuery(‘#audio1_html5_white’).audio1_html5({
skin: ‘whiteControllers’,
playerPadding:5,
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: whiteControllersWithPlaylistEx1.html) to assure you include the controller skin correctly.

<div class=”audio1_html5″>
<div id=”audio1_html5_white”>
<div class=”xaudioplaylist”>
<ul>
<li class=”xtitle”>This is Freeform A</li>
<li class=”xauthor”>Author Name</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=”xsources_mp3″>audio/adg3com_freeform.mp3</li>
<li class=”xsources_ogg”>audio/adg3com_freeform.ogg</li>
</ul>

</div>
</div>
</div>

 

 


JS Options

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:
– whiteControllers
– blackControllers
centerPlugin false Possible values:
true – the player will be centered on the page
false – the player will not be centered on the page
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 false 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.
Controllers Settings: Show/Hide buttons & elements
showRewindBut true Possible values:
true – rewind button will appear
false – rewind button will not appear
showPlayBut true Possible values:
true – play button will appear
false – play button will not appear
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
showVolumeBut true Possible values:
true – volume button will appear
false – volume button will not appear
showVolumeSliderBut true Possible values:
true – volume slider will appear
false – volume slider will not appear
showTimer true Possible values:
true – timer will appear
false – timer will not appear
showSeekBar true Possible values:
true – seekbar will appear
false – seekbar will not appear
showAuthor true Possible values:
true – Audio track Author will appear in the text are which resides below seekbar
false – Audio track Author will not appear in the text are which resides below seekbar
showTitle true Possible values:
true – Audio track Title will appear in the text are which resides below seekbar
false – Audio track Title will not appear in the text are which resides below seekbar
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 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(‘#audio1_html5_white’).audio1_html5({
skin: ‘whiteControllers’,
playerPadding:5,
autoPlay:true
});

 

 


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=hQt-hjz3_IQ

API function

You can play/pause the player from an external button, by adding a javascript function to a button on the page.

jQuery.audio1_html5.playPause(‘the_player_id’);

 

 

Example:

<a href="javascript:void(0)" onclick="jQuery.audio1_html5.playPause('the_player_id');">play/pause button</a>

Demo:

See full demo here: chameleon.hi2.ro

Download links:

Server 1 Server 2 Server 3 Server 4 Server 5