1. Quick install
After you downloaded your Joomla extension, just go to Extensions -> Extension Manager -> select the Upload Package File from the top tabs -> click on the Choose File button and select the ES Audio Player zip file -> click on the Upload & Install blue button.
Your module will now appear in the Module Manager section.
2. Basic settings for your extension
In the Extensions -> Module Manager section, find your ES Audio Player module and click on it to access the module's setup section.
First, from the right side of the page change the Status of the module into Published, put it into the desired Position and, if you want your module to be displayed with a title, select from the right Show at the Show Title section. Last, give your module the title that you want it to be displayed with.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setup ES Audio Player
1. Playlist setup
From the "Music folder", select your folder from the dropdown list. Then, select your photo folder (the folder where you uploaded the thumbnails for each song) from the dropdown list under "Images folder". Press "Select" button, and your playlist will autopopulate with the informations for each song, except the thumbnail.
Then, just go to each song and select from the dropdown list the thumbnail image. Do this for each song that you have in your playlist.
Don't forget to Save your settings.
For each song, you can also type a different/custom Title, Artist name, Publisher, Album, Year, Duration.
The Follow-up URL: here, you can place a link for the song - it can go to download, another page, website, cart, etc.
Price: you can set the price for downloading the song. You have to type the currency too.
Description: you can place your description for the song.
2. Setting up the visuals
Once you are done with setting up your playlist, you can customize it.
You will find all the settings under "General settings" tab.
2.1. General settings
Here, you have the following options:
Player width - the total width of the player in px
Control bar width - the width of the control bar in px
Progress bar width - control of the progress bar (in the control bar) in px
Autoplay - select "Yes" or "No" if you want the player to start automatically at page load
Display minified - select "Yes" or "No" if you want the player to be displayed minified.
2.2. Top Area
Has the following options:
Display image - display an image for each track
Display title - show the track title in the top area
Title font weight - the thickness of the title font
Display artist - enable/disable the name of the artist from the top area
Display album - enable/disable the name of the album from the top area
Display year - enable/disable the year of the album from the top area
Display publisher - enable/disable the name of the publisher from the top area
Display description - enable/disable the track's description from the top area
You can choose what informations would you like to be displayed in frontend. These options work for all tracks, not just one in particular - eg. if you choose not to display artist, it will not be displayed for any song.
2.3. Controlls
Here, you can find the following options:
Display mute button - enable/disable the mute button from the control bar
Display volume bar - enable/disable the volume icon from the control bar
Display duration - enable/disable the duration of the song from the control bar
Margin left for control bar - the left distance of the control bar to the player's marign in px
Margin top for control bar - the top distance of the control bar to the player's marign in px
2.4. Playlist
Comes with the following options:
Visible tracks - set the visible no. of tracks before "view more" button
Show scroll - display a scroll bar next to the playlist
Show more/less - display "view more" / "view less" button
Playlist track name room - set the width of the playlist titles, pushing the durations more to the right. This value is in % - eg. 50% space allowed, for longer titles. If set at 100%, it will push the durations on a new row.
Playlist track name font size - the size of the track name font
Margin top for playlist - set how high would you like the playlist to be to the control bar.
2.5. Follow up URL and Prices
These settings allow you to set up a followup / download link and the price for each song (the price will be displayed near the followup link of each song). You can also customize the anchor / label text for the URL (eg. buy, download, etc.), its font size and width.
2.6. Colors
From this tab, you can customize the appearance for your audio player. You have several options, like:
Audio player color - the general color for the player (it is visible especially on the top of the player)
Title color - the color for the song's title (displayed on the top side)
Track info color - the color for the song's other info like artist, album, year, publisher, (displayed on the top side)
Description color - the color for the song's description (displayed on the top side)
Control bar color - the background color for the control bar
Playlist color - the background color for the playlist
Playlist text color - the color for the playlist titles
Track playing color - the color for the currently playing track
2.7. Compatibility
You can activate/ deactivate the JQuery.
