SJ Audio Fly is a powerful music player with great, unique features:
- You can use it to redirect your songs to a shop
- Visitors can create their own playlist that they can listen and download
- The playlist will be remembered even the next time you and you visitors acess the website
It has lots of uses: music shops, kids websites, bands and musicians portofolios and every website you wish to have a cool music player.
Audio Fly is using add-ons for styling and design:
- Add AudioFly Item is a module that allows you to create simple play buttons to place them anywhere on the page (eg. inside articles, module positions). With it, you can load music from local or Dropbox.
- Add AudioFly Playlist allows you to display an entire music folder in a playlist.
- Add AudioFly Grid displays the audio files in a grid layout, with poster images and descriptions.
- Add from Cloud allows you to get your music from Dropbox Cloud and display it as a customizable playlist. This is very handy when having low storage space or want a music player that has it's sources online.
Basic |
Standard |
Professional |
|---|---|---|
| AudioFly main module | AudioFly main module | AudioFly main module |
| Add Playlist | Add Playlist | Add Playlist |
| - | Add Grid | Add Grid |
| - | - | Add Item |
| - | - | Add From Cloud |
| 24$ | 32$ | 57$ |
HTML5 AudioFly Module Demo
Demo
The main player appears when playing any song from this page and will be docked on the botom side of the screen. You can customize it's appearance to fit any design. Here are several photos with various designs:
Features
HTML5 AudioFly Module Features:
- HTML5 music player with local and Dropbox sources
- With 4 versatile Add-ons for styling and design
- The playlist will be remembered even the next acess of the website
- Fully customizable
- Sticky functionallity
- Redirect / download songs straight from the player
How to use AudioFly
1. HTML5 AudioFly Quick install
- Log in to the Joomla administration back-end.
- Select Extensions --> Install/Uninstall from the top menu.
- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.
- Click the button Upload & Install.
- Select Extensions --> Module Manager from the top menu and click SJ HTML5 AudioFly in the list.
- Open the module and follow the setup.
2. Basic settings for the module
Browser suport:
| Browser | MP3 | OGG |
| Internet Explorer 9 | YES | No |
| Firefox 4.0 | No | YES |
| Google Chrome 6 | YES | YES |
| Apple Safari 5 | YES | No |
| Opera 10.6 | No | YES |
In the Extensions -> Module Manager section, find your HTML5 AudioFly module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
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. Setting up the visuals
3.1. SJ HTML5 AudioFly Settings
Inside this section, you will find the options that allows you to set the colors for the Library/ Playlist and the Selected Item from the playlist.
Also, you can chose the status for the Library and the Download Icon, if you want the playlist to repeat after the last song and set the custom text displayed when the player is opened without a playlist.
3.2. Backgrounds and JQuery
Inside this section, you can set the colors for the player's background and set some custom CSS if you like.
Also, you can activate/ deactivate the JQuery.
Support
Product support
When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product.
The support provided does not include any module customization or setup, additional options or features.
If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.
Extra services
We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.
Our services include:
- Website developement: design from scratch, content management system, structure and content
- Joomla extensions
- Graphic design for both web and print: logo, stationery, illustrations
Order our services
If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.
Add AudioFly Item Demo
Demo
These are individual play buttons you can place anywhere on your website: inside an article or a module position.
Features
Audiofly Item Features:
- Load music from Local or Dropbox
- Create simple Play Buttons and place them anywhere on the page: Inside articles, module positions
- User friendly background
- Highly customizable
- Custom CSS
How to use AudioFly Item
1. AudioFly Item Add-on Quick install
This is a module that works only with the SJ HTML5 AudioFly main module. After installing and customizing the main module, you can go ahead and install AudioFly Item module, in the same manner as any Joomla extension:
- Log in to the Joomla administration back-end.
- Select Extensions --> Install/Uninstall from the top menu.
- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.
- Click the button Upload & Install.
- Select Extensions --> Module Manager from the top menu and click AudioFly Item in the list.
- Open the module and follow the setup.
2. Basic settings for AudioFly Item
In the Extensions -> Module Manager section, find your AudioFly Item module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
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.
If you want to place this module inside an article, you can type down a custom position and use the { loadposition yourcustomname } inside the article.
If you would like to place it inside a module position, just select the position from the drop-down.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setting up AudioFly Item
3.1. Source settings and Song settings
Prerequisites: Before setting up the module, only for the local items and not for the Dropbox items, login to your FTP, go to your website folder, navigate to modules/mod_sj_add_audiofly_item/audio folder and upload the audio files in .mp3 and .ogg formats into this folder.
On the Source settings area, you can select the source for the songs: Local or Dropbox.
If chosed Dropbox, you can select the file you want to add on your website.
The Songs Settings area allows you to chose any Local song in order to display it on your website. Select from the drop-down the song, give it a custom link (redirect/download/buy link) if you desire and an anchor text. (this is the "Play" button)
3.2. Customization
This area contains all the options you need for the design and style of your module.
You can set a width and a height for the play button, alignment and margins, background styles, hover colors, borders and shadows.
Background image: this option allows you to chose predefined button designs.
If you need even more styling, you can write your own CSS: Advanced -> CSS Options
Support
Product support
When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product.
The support provided does not include any module customization or setup, additional options or features.
If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.
Extra services
We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.
Our services include:
- Website developement: design from scratch, content management system, structure and content
- Joomla extensions
- Graphic design for both web and print: logo, stationery, illustrations
Order our services
If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.
Add AudioFly Playlist Demo
Demo 1
These are two demos for AudioFly Playlist on a darker color palette.
Demo 2
These are two demos for AudioFly Playlist on a lighter color palette.
Features
AudioFly Playlist Features:
- Load an entire music folder in a playlist display
- Play All option
- Play button / Download option for each song
- User friendly Playlist Setup in the backend
- Download/Shop Link, Artist and Poster image for each song
- Highly customizable design
- Custom CSS
How to use AudioFly Playlist
1. AudioFly Playlist Add-on Quick install
This is a module that works only with the SJ HTML5 AudioFly main module. After installing and customizing the main module, you can go ahead and install AudioFly Playlist module, in the same manner as any Joomla extension:
- Log in to the Joomla administration back-end.
- Select Extensions --> Install/Uninstall from the top menu.
- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.
- Click the button Upload & Install.
- Select Extensions --> Module Manager from the top menu and click AudioFly Playlist in the list.
- Open the module and follow the setup.
2. Basic settings for AudioFly Playlist
In the Extensions -> Module Manager section, find your AudioFly Playlist module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
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.
If you want to place this module inside an article, you can type down a custom position and use the { loadposition yourcustomname } inside the article.
If you would like to place it inside a module position, just select the position from the drop-down.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setting up AudioFly Playlist
3.1. Playlist Setup
Prerequisites: Before setting up the module, login to your FTP, go to your website folder, navigate to images folder and upload the audio files in .mp3 and .ogg formats into this folder.
First step is to set up the songs: go to the Playlist setup and select the Music folder and the Image folder.
You will notice that the songs in that folder will be listed below with title. Next, you should fill the Download/Shop link, Artist and Poster Image (select the photo from the drop-down menu) for each song.
3.2. General Settings
In the General Settings section, you can find the options for width and height, alignment, icon and poster types and sizes, download link use, size and icon.
3.3. Backgrounds, Text and title, Multiple instances
This section is about setting up the colors for the playlist, text and titles.
If you need more CSS, you have a custom field to add your styles.
Also, you have the JQuery option to chose between Yes/No.
Support
Product support
When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product.
The support provided does not include any module customization or setup, additional options or features.
If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.
Extra services
We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.
Our services include:
- Website developement: design from scratch, content management system, structure and content
- Joomla extensions
- Graphic design for both web and print: logo, stationery, illustrations
Order our services
If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.
Add AudioFly Grid Demo
Demo 1
This is a demo with a light color palette design.
Demo 2
This is a demo with a darker color palette design.
Demo 3
Demo
Features
AudioFly Grid Features:
- Load the audio files and displays them in a grid layout
- User friendly Add Item in the backend
- Add each song individually with redirect / download link, play / listen custom text, title, description and poster image
- Item customization
- Play / listen button customization
- Custom CSS
How to use AudioFly Grid
1. AudioFly Grid Add-on Quick install
This is a module that works only with the SJ HTML5 AudioFly main module. After installing and customizing the main module, you can go ahead and install AudioFly Grid module, in the same manner as any Joomla extension:
- Log in to the Joomla administration back-end.
- Select Extensions --> Install/Uninstall from the top menu.
- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.
- Click the button Upload & Install.
- Select Extensions --> Module Manager from the top menu and click AudioFly Grid in the list.
- Open the module and follow the setup.
2. Basic settings for AudioFly Grid
In the Extensions -> Module Manager section, find your AudioFly Grid module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
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.
If you want to place this module inside an article, you can type down a custom position and use the { loadposition yourcustomname } inside the article.
If you would like to place it inside a module position, just select the position from the drop-down.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setting up AudioFly Grid
3.1. Item Setup
Prerequisites: Before setting up the module, login to your FTP, go to your website folder, navigate to images folder and upload the audio files in .mp3 and .ogg formats into this folder.
First step is to set up the songs: go to Setup section and select the Music folder and the Image folder.
Then, inside each item, select the Audio file (these audios will be the ones from the previously selected folder), set a Custom link if you like (this can be the link from a shop, play/listen, download link), set the Anchor text (play/listen/download), the Title and Description of the song, select the Poster image (these images are the ones previously selected at "Images folder").
Once done, you can Add another item from the plus sign. You can also delete one item from the minus sign at the bottom of each item.
Inside an item, you can add only one song.
3.2. Item Customization
This is the section where you can chose the background (none, simple color or gradient variations) and title color and the layout: 1, 2, or 3 columns.
3.3. Play button (Anchor text) customization.
Inside this section you can customize the visuals for the Anchor text you've set in the item setup. (aka. Play/Listen/Download)
For this button you can set the width and height, margins, text alignment, background and text colors in both normal and hover state, shadow effect and border radius.
If you wish to add more customization rules, you have a Custom CSS Option.
Support
Product support
When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product.
The support provided does not include any module customization or setup, additional options or features.
If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.
Extra services
We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.
Our services include:
- Website developement: design from scratch, content management system, structure and content
- Joomla extensions
- Graphic design for both web and print: logo, stationery, illustrations
Order our services
If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.
Add From Cloud (Dropbox) Demo
Demo
This is a coloured design for Add from Cloud. You can also design this on neutal, one color, lighter or darker color palette.
Features
AudioFly Add from Cloud Features:
- Add music from Dropbox Cloud
- Load the audio files and displays them in a playlist layout
- User frindly Add Item in the backend
- Add each song individually with redirect / download link, play / listen custom text, title, description and poster image
- Fully customizable
- Play button customization
- Custom CSS
How to use Add from Cloud
1. Add from Cloud Quick install
This is a module that works only with the SJ HTML5 AudioFly main module. After installing and customizing the main module, you can go ahead and install Add from Cloud module, in the same manner as any Joomla extension:
- Log in to the Joomla administration back-end.
- Select Extensions --> Install/Uninstall from the top menu.
- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.
- Click the button Upload & Install.
- Select Extensions --> Module Manager from the top menu and click Add from Cloud in the list.
- Open the module and follow the setup.
2. Basic settings for Add from Cloud
In the Extensions -> Module Manager section, find your Add from Cloud module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
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.
If you want to place this module inside an article, you can type down a custom position and use the { loadposition yourcustomname } inside the article.
If you would like to place it inside a module position, just select the position from the drop-down.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setting up Add from Cloud
3.1. Item Setup
At this instance, you have to select your file/song from Dropbox. Inside an item, you can add only one song. After selecting the song, you can add a Custom link (this is the link for redirect/download/play/listen), an Anchor text (aka. download/play/listen), a Title an a Description for the song for the song and last, a Poster image (you have to cose this one from Dropbox also)
You can add another item by clicking the plus icon and delete one by clicking the minus icon from the bottom of each item.
3.2. General customization
Inside this section, you can customize the following:
Playlist Width: this value is in percentage
Playlist alignment: sets the alignment towards the sides of the screen - Left, Center, Right
Various Background settings: you can use different color schemes for the background, such as simple color, 1, 2 or 3 color gradient, and ofcourse, no background color at all.
Options for the text (title and description): such as colors, font weight, width
The spacing between the items: allows you to set a certain space between the items that are being displayed in the frontend.
3.3. Play button customization
The second section is the one for the Play button customization.
You can select wether you want to use an icon from a dropdown list, or customize the one you've set as the Anchor text in the previous section - Item setup.
You can set a width and a height, alignment and margins, background and text color for both states normal and mouse over, shadow color.
You can also set a div name and a class name if you like to add some custom CSS.
Support
Product support
When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product.
The support provided does not include any module customization or setup, additional options or features.
If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.
Extra services
We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.
Our services include:
- Website developement: design from scratch, content management system, structure and content
- Joomla extensions
- Graphic design for both web and print: logo, stationery, illustrations
Order our services
If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.
