complete pack
English Chinese (Simplified) Czech French German Greek Italian Spanish

SJ HTML 5 AudioFly

1 1 1 1 1 1 1 1 1 1 Rating 4.67 (27 Votes)

sj audiofly product pictureSJ 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$ 

 

Select:


Domain*
* Required
Price: 24.00 USD

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:

234 

0:00

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.

q

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.

1

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.

2

Screenshots

1

2

Support

emailsupport1Product 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.

services-web-designExtra 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.

Play

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.

q

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.

w
r

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)

e


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.

t

If you need even more styling, you can write your own CSS: Advanced -> CSS Options

4


Screenshots

1

2

3

4

Support

emailsupport1Product 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.

 

services-web-designExtra 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.

31 Minute to Takeoff
Mike Posner
California Gurls
Katy Perry
Cuando Me Enamoro
Enrique Iglesias
Dynamite
Taio Cruz
Love The Way You Lie
Rihanna
Mine
Katy Perry
Teenage Dream
Katy Perry
Play All
31 Minute to Takeoff
California Gurls
Cuando Me Enamoro
Dynamite
Love The Way You Lie
Mine
Teenage Dream
Play All

Demo 2

These are two demos for AudioFly Playlist on a lighter color palette.

31 Minute to Takeoff
California Gurls
Cuando Me Enamoro
Dynamite
Love The Way You Lie
Mine
Teenage Dream
Play All
31 Minute to Takeoff
California Gurls
Cuando Me Enamoro
Dynamite
Love The Way You Lie
Mine
Teenage Dream
Play All

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.

q

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.

w

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.

1

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.

2

Screenshots

1

2

3

Support

emailsupport1Product 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.

 

services-web-designExtra 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.

31 Minute to Takeoff
31 Minutes to Takeoff
31 Minutes to Takeoff is the debut studio album by American singer Mike Posner. It was released on August 10, 2010, by J Records.
Listen
California Gurls
California Gurls
"California Gurls" is a song recorded by American singer Katy Perry for her third studio album, Teenage Dream (2010). The song features verses from rapper Snoop Dogg.
Play
Cuando Me Enamoro
Cuando Me Enamoro
"Cuando Me Enamoro" (English: "When I Fall in Love") is a Latin pop song written and performed by Spanish pop singer-songwriter Enrique Iglesias and featuring Dominican singer-songwriter Juan Luis Guerra released on April 26, 2010, as the first single from his ninth studio album.
Listen
Dynamite
Dynamite
"Dynamite" is a song by English recording artist Taio Cruz for the international version of his second studio album, Rokstarr (2010). Cruz co-wrote the song Max Martin, Bonnie McKee, Benny Blanco, and Dr. Luke; the latter two are also the producers.
Play
Love The Way You Lie
Love the Way You Lie
"Love the Way You Lie" is a song recorded by the American rapper Eminem with the Barbadian singer Rihanna, from Eminem's seventh studio album Recovery (2010). The singer-songwriter Skylar Grey wrote and recorded the demo alongside the producer Alex da Kid when she felt she was in an abusive romantic relationship with the music industry
Listen
Mine
Mine
"Mine" is a country pop song performed by American singer-songwriter Taylor Swift. The song was written by Taylor Swift alone and produced by Swift along with Nathan Chapman. It was released as the lead single from Swift's third studio album, Speak Now (2010) by Big Machine Records.
Play

Demo 2

This is a demo with a darker color palette design.

31 Minute to Takeoff
31 Minutes to Takeoff
31 Minutes to Takeoff is the debut studio album by American singer Mike Posner. It was released on August 10, 2010, by J Records.
California Gurls
California Gurls
"California Gurls" is a song recorded by American singer Katy Perry for her third studio album, Teenage Dream (2010). The song features verses from rapper Snoop Dogg.
Cuando Me Enamoro
Cuando Me Enamoro
"Cuando Me Enamoro" (English: "When I Fall in Love") is a Latin pop song written and performed by Spanish pop singer-songwriter Enrique Iglesias and featuring Dominican singer-songwriter Juan Luis Guerra released on April 26, 2010, as the first single from his ninth studio album.
Dynamite
Dynamite
"Dynamite" is a song by English recording artist Taio Cruz for the international version of his second studio album, Rokstarr (2010). Cruz co-wrote the song Max Martin, Bonnie McKee, Benny Blanco, and Dr. Luke; the latter two are also the producers.
Love The Way You Lie
Love the Way You Lie
"Love the Way You Lie" is a song recorded by the American rapper Eminem with the Barbadian singer Rihanna, from Eminem's seventh studio album Recovery (2010). The singer-songwriter Skylar Grey wrote and recorded the demo alongside the producer Alex da Kid when she felt she was in an abusive romantic relationship with the music industry
Mine
Mine
"Mine" is a country pop song performed by American singer-songwriter Taylor Swift. The song was written by Taylor Swift alone and produced by Swift along with Nathan Chapman. It was released as the lead single from Swift's third studio album, Speak Now (2010) by Big Machine Records.

Demo 3

Demo

31 Minute to Takeoff
31 Minutes to Takeoff
31 Minutes to Takeoff is the debut studio album by American singer Mike Posner. It was released on August 10, 2010, by J Records.
California Gurls
California Gurls
"California Gurls" is a song recorded by American singer Katy Perry for her third studio album, Teenage Dream (2010). The song features verses from rapper Snoop Dogg.
Cuando Me Enamoro
Cuando Me Enamoro
"Cuando Me Enamoro" (English: "When I Fall in Love") is a Latin pop song written and performed by Spanish pop singer-songwriter Enrique Iglesias and featuring Dominican singer-songwriter Juan Luis Guerra released on April 26, 2010, as the first single from his ninth studio album.

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.

q

3. Setting up AudioFly Grid

3.1. Item Setup

w

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.

1

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)

2

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.

3

Screenshots

1

2

3

4

Support

emailsupport1Product 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.

 

services-web-designExtra 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.

31 Minute to Takeoff
31 Minutes to Takeoff is the debut studio album by singer Mike Posner.
Love The Way You Lie
Song recorded by the rapper Eminem with the singer Rihanna
California Gurls
"California Gurls" is a song recorded by American singer Katy Perry
Cuando Me Enamoro
"Cuando Me Enamoro" (English: "When I Fall in Love") is a Latin pop song
Dynamite
"Dynamite" is a song by English recording artist Taio Cruz

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.

q

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.

w

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.

1



 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.

2

3

You can also set a div name and a class name if you like to add some custom CSS.

Screenshots

1

2

3

4

Support

emailsupport1Product 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.

 

services-web-designExtra 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.

 

Pin It

Comments   

0 #1 LucretiaSmall 2017-11-17 13:29
I have checked your page and i have found some duplicate content, that's why you don't rank high
in google, but there is a tool that can help you
to create 100% unique content, search for: Boorfe's tips unlimited content
Quote

Add comment


Security code
Refresh