Help is on the way!

Browse our Documentation, Search the Knowledge Base, Still need help? Send us a support ticket.

Description

The JoomlaXTC MP3 Chart module displays up to ten mp3 audio tracks in custom or pre-made styles with an integrated audio player and interactive features.

Installation

Upload the .zip file to your site using the Joomla Installer.

Configuration

ParametersThe module accepts up to ten entries in the chart, each entry has a set of parameter fields,
fill each one for the tracks you want to include in the chart (eg: for a top-5 list, only fill the first 5 entries):

Track Position - The Chart position for the track

Track File
- The MP3 audio file to play for this track entry. MP3 files must be stored in the media/ folder of your Joomla system.

Artist Name - The name of the artist or author of the track.

Track Title - The name of the track or song.

Track Label - The name of the label or record company of the track.

Track Thumbnail - A thumbnail for the track, for example an artist's photo or album cover.

Download/Buy Link - This is a link to an external download or buy page for the track.

Track Description - A description related to the track. This text can include HTML code.

 

ParametersThe module also uses additional parameters to configure the visual style and the playback of sound files:

Layout - Choose a layout template to display the chart. Custom layouts can have different elements and easily be added (see notes below).

Chart Header - Additional text to include above the chart display. This parameter can contain HTML, CSS and Joomla content plugin calls.

Chart Footer - Additional text to include below the chart display. This parameter can contain HTML, CSS and Joomla content plugin calls.

Auto Start - This parameter enables automatic playback starting with #1 track audio file.

Auto Jump - If enabled, audio playback will continue with the next track after one finishes.

Play Mode - Depending on this parameter, the stop button will pause or stop data streaming.

Download/Buy Link Mode - Defines the window open mode for Download/buy links.

Custom Layouts

The MP3 Chart Module can use different layouts to display the chart contents, these layouts are composed of a CSS file with the necessary vistual styling code, and a PHP program that renders the HTML code for the chart.

To create a new layout, you must first make a new folder within the "layout" directory of the module, for example, if your layout is called "MyLayout" then the folder path would be "/modules/mod_jxtc_mp3chart/layouts/MyLayout" in your joomla folder.

Next, you must save two files in there: "chart.css" and "chart.php". As explained before, the .php is the program that actually builds the HTML to draw the chart on screen, while the CSS contains all the visual stylings as needed. The two files will be called automatically by the module according to the "Layout" parameter. This method allows you to have a collection of layouts at any given time, selectable with just a simple parameter change. Of course, if there are multiple copies of the module, each copy can have their very own layout as well.

Some considerations need to be made for layout development, the first one being that all track information is available on an array called "$elements", this array contains an object element for each track found. The next consideration is that the layout program does not output anything, it must return the complete HTML code for the chart in a variable called $html. This is in turn used by the module to display the chart. Other than this, you are free to design layouts as you wish!

The "chart.css" contains any CSS code required to style the chart content, since it depends on the HTML code of the chart, it is up to the developer to create this file as necessary.

As an example of the object variables available per track and how to build the HTML and CSS code, you can look at the included layout files.

Video Tutorial

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET