SJ HTML5 AudioFly

1 1 1 1 1 Rating 4.52 (21 Votes)

 compat 30

audiofly img SJ HTML5 AudioFly is a custom html5 audio player with on the fly playlist. Verry usefull on music demo sites and shops creates custom styled buttons in any article wich on click will display an audio player, that can be sticky to your screen or in a module position, to play the sample. From there your customers can click on a custom made link to direct them to your purchase, info or more details page.  Our player runs on smartphones using Android and iOS.

 

 

Demo

Love The Way You Lie

Love The Way You Lie

"Love the Way You Lie" is the second single from American rapper Eminem's seventh studio album.
Play
Mine

Mine

"Mine" is a country pop song performed by American singer-songwriter Taylor Swift.
Demo

Dynamite

Dynamite

"Dynamite" is the fourth single from English recording artist Taio Cruz's second album Rokstarr.
Teenage Dream

Teenage Dream

Teenage Dream is the third studio album by American recording artist Katy Perry.

 

Download
0:00

 

Quick install guide

 

1. Log in to the Joomla administration back-end.

2. Select Extensions --> Install/Uninstall from the top menu.

3. In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.

4. Click the button Upload & Install.

5. Select Extensions --> Module Manager from the top menu and click SJ HTML5 AudioFly in the list.

6. Open the module and follow setup.

Set-up

 Setup SJ HTML5 AudioFly

General

The concept for this module is to play a specific toon at user click on a custom made button or link anywhere on the page. For this we created basically 2 modules one serving the other, the main one is the actual player with  that starts hidden because has no file to play until the user click on the second module that represent a button with some custom made tags for file to be played, song name, duration etc. Each one of them has options to be customized to fit the website theme.

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

I. Setup the player

In the backend of your joomla website select Extensions --> Module Manager from the top menu and click SJ HTML5 AudioFly in the list.

1. Customize your visual and functional options

html audiofly

All theese options are self-explanatory.

II. Setup the buttons for play

This is the addon module we use to add items to be played by the main module SJ HTML5 AudioFly.

 1. Install the addon module

Follow the same installation steps explained at Quick Install Guide tab to install mod_sj_add_audiofly_item shipped with the download package, then in the backend of your joomla website select Extensions --> Module Manager from the top menu and click mod_sj_add_audiofly_item in the list.

 

2. Setup

Song name      - type here the name of the song, it must be the same name as the file has. Ex: for my song.mp3 and my song.ogg here must be typed my song
Song duration - the duration of the song
Custom link      - the web adress where the user will be driven when he clicks the custom link button on the player (aka  Download). For external link use absolute path ex: http://www.mypage.html and for internal use relative path ex: mypage.html
Anchor text
    - the text that will be written on the button ex: Play, Demo, Play now etc

add item song settings

3. Customize your button

 From here the visuals can be customised in a various number of ways.add item btn customisation4. Advanced options

The advanced options tab contains 2 important options:
Div id for this item - this will permit the user to customize the visuals  just for this item or for a specific grup of items. 
CSS Options - Custom text field where customm CSS can be written to maximise the control over the module.

add item advanced

5. Publish

In the left hand size give your module a Title , select the Position you want to publish check the Status to be Published and Module Assignement to be On all pages or if you want specific pages select them from the list. The both modules must be active on same pages.

6. Save and exit

Enjoy!


 

Version history

v1.0 

 

  • Complete control over the items

v1.1

  • modal added
  • multiple buttons added for add-on
  • auto time trigger from id3 tag
  • history for multiple pages
  • new code improvments
  • support for new addons

  

Support

For any problems regarding our products do not hesitate to contact us on our suport emails:  This email address is being protected from spambots. You need JavaScript enabled to view it. This email address is being protected from spambots. You need JavaScript enabled to view it.  or place your questions, comments and critics in the comment form below.

You should also make sure :

  1. Joomla! is up to date and properly configured;
  2. Your SuperJoom products are up to date;
  3. The website is live and open to public (not localhost)

Contact

If you have any ideas or questions, please feel free to contact us using our contact data or the form below.

 
 
  *
 
  *
  *
 
  *
 
  *
 
  Please enter the characters displayed in the image into the adjacent input field. If you are not able to read them, click the adjacent button to generate a new image.
 
  * Mandatory field
 
Created using the Joomla DFContact component.


License
GNU General Public License

Buy

SJ AudioFly + Add item add-on 14.99$ SJ AudioFly
Add Playlist add-on 5.99$ SJ AudioFly Playlist add-on
Add Grid add-on   coming soon...
Add Block add-on   coming soon...

 

 

 

 

Demo for Playlist addon

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

Demo2

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

Add AudioFly Playlist - demo3

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

Quick install guide

 

1. Log in to the Joomla administration back-end.

2. Select Extensions --> Install/Uninstall from the top menu.

3. In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.

4. Click the button Upload & Install.

5. Select Extensions --> Module Manager from the top menu and click SJ HTML5 AudioFly in the list.

6. Open the module and follow setup.

Set-up

 Setup SJ HTML5 AudioFly

General

The concept for this addon-module is to play a specific toon at user click on a custom made playlist. For this we created basically 2 modules one serving the other, the main one is the actual player with  that starts hidden because has no file to play until the user click on the second module that represent a playlist  with some custom made tags for file to be played.

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

 

I. Setup the playlist for play

This is the addon module we use to add items to be played by the main module SJ HTML5 AudioFly.

 1. Install the addon module

Follow the same installation steps explained at Quick Install Guide tab to install mod_sj_add_audiofly_playlist shipped with the download package, then in the backend of your joomla website select Extensions --> Module Manager from the top menu and click mod_sj_add_audiofly_item in the list.

2. Setup

         Items set-up      - here you can generate your playlist and select the folder with your desired audio files.

playlist set-up

                      - here you have the option to upload songs and manage files with native media manager fromjoomla 2.5.x
        Display customisation - here youhave soem options in order to arrangeyou playlsit as you like.

playlist customisations

3. Publish

In the left hand size give your module a Title , select the Position you want to publish check the Status to be Published and Module Assignement to be On all pages or if you want specific pages select them from the list. The both modules must be active on same pages.

4. Save and exit

Enjoy! 

 


Version history

 

v1.0 

  • Playlist setup
  • Select Folder
  • Media manager

  

Support

For any problems regarding our products do not hesitate to contact us on our suport emails:  This email address is being protected from spambots. You need JavaScript enabled to view it. This email address is being protected from spambots. You need JavaScript enabled to view it.  or place your questions, comments and critics in the comment form below.

You should also make sure :

  1. Joomla! is up to date and properly configured;
  2. Your SuperJoom products are up to date;
  3. The website is live and open to public (not localhost)

Contact

If you have any ideas or questions, please feel free to contact us using our contact data or the form below.

 
 
  *
 
  *
  *
 
  *
 
  *
 
  Please enter the characters displayed in the image into the adjacent input field. If you are not able to read them, click the adjacent button to generate a new image.
 
  * Mandatory field
 
Created using the Joomla DFContact component.


License
GNU General Public License

 

 

 

Comments   

 
0 #2 self publish be 2014-08-20 05:46
You have been looking ɑround fоr informatіon to the benefits of self publishing νs traditional publishing ɑnd by now you see what POD (Print-Оn-Deman d)
publishing has to offer ƴou but you arе still a littlе weary about it.
- Foг thе whole cover, selecting а suitable background effеct wɦether plain color
οr textured with any of thе special effects ɑvailable in Photoshop.
POD that offers complete ɑnd extensive distribution services.
Quote
 
 
0 #1 moz54 2013-08-03 09:53
That's a really cool way of showing up the songs. Warmly recommend this mod.

Vance
Quote
 

Add comment


Security code
Refresh