Audio Players Flash/HTML5 for Joomla

The Freelance Soundlabs website is designed to be HTML5 compatible which means it does not rely purely on Flash for media playback. 

Mobile devices such as iPads and android tablets, smart phones and the likes require different methods for playing media files such as mp3 and video than desktop PCs. 

The biggest challenge I had was to find an audio player that would work with MP3 files on all platforms and browsers. I spent months testing and contacting developers and even lost some money on useless solutions. 

In the end there were 2 clear winners for players which I will use throughout the site:

Sound Manager 2

This is an open source code option that uses both Flash and HTML5 for browsers to offer the greatest support. The code is not spcific to Joomla and can be deployed on any website pretty easy. There is a load of documentation and basically on the website of choice you can just add the loading of the Javascript files into the Head of the website then on any page place "href" commands with your MP3 path and a play button is created.

There are a number of different skin options and some really nice features such as stopping a file if one is playing and continuing to the next file on a page and showing which file is playing etc. 

For the website I needed to load both the Java files and CSS files with the template so when you visit the site the files are pre-loaded and ready to go. One way to do this is to edit the template file and add the required code into the Head section. The issue doing this is if there is a template update for newer versions the code could be undone and I would probably forget just what I did.

Doing some research I found a simple Joomla component called Easy Script (free) which allows you to load custom CSS files, java files and any other custom code that needs to be loaded with the site without having to edit the main site files. The component simply adds the code into the sites header and this then also makes it simple to update the code or disable the feature if there are issues. 

Once the required files were loaded and active on the site all that is required to do is add a single line where you want to place a play button:

"<p><a href="/mp3/demo/DemoCD2-demo/File01.mp3" class="sm2_button">File01</a> File 1</p>"

This will render a button like this:

demo1 File 1

 Placing multiples on a page allows any files to be previewed and will stop the others:

demo2 File 1

demo3 File 2

demo4 File 3

demo5 File 4

This is a nice simple solution that works well on any modern browser, tablet or smartphone. Give it a go. It is also very handy to be able to place these anywhere on a page which makes it very flexible. 

There is also a different styled mini player that can be used. It is a completely different player skin and has a few extra CSS files and Java files to load but loading all the files for both players allows both to be used:

"<div class="ui360"><a href="/mp3/demo/DemoCD2-demo/File01.mp3">File 1</a></div>"

This player requires a little more space but is a nice styled one.

You can find all these and even more styles on the Sound Manager site

 

Sound Space

This solution is the choice for the sites main audio player. This is again completely web browser and platform independent but is a Joomla module so integrates nicely. It is actually based off a coded player from http://cc.radykal.de/fullwidthaudioplayer/index.php which can be purchased for $10 and would install in the same way as the Sound Manager player. Having a Joomla module is a nice integrated option.

This player will hide out of view until you select a file to play. It will then pop out from the top/bottom of screen and allow you to control the playback. Selecting another file will start playing and also add to a playlist. It's a nice solution and being a module allows different styled ones to be placed on different pages. It easily allows many files on a single page to be played at any time from anywhere.

This option costs $15 but is worth the cost. Initially I had some issues getting support from the developers when I could not get the module functioning but a bit of a kick up the backside and they were right on it and even found some small issus and fixed them. They logged into my site and got it all working for me so for that I have to give them credit. 

The player can be set to load a playlist of files on any page or you can send a single file to the player from any page. Clicking on the file will open it in the player and can pass a custom image too. Example:

Button-Play-icon

Any text or image can be a playable link and clicking one will load it into the player and stop playback of the previous. This Sound Space implementation requires no fancy code which makes creating playable examples very simple. 

 


Through experimenting with these players and reading hundreds of pages on the subject I have learned a lot about media players for smartphones. All websites I designed in the past had simple players that were just flash based and worked only on desktops but I just never had the need to target my sites to mobile users (and that technology wasn't even around when I first started). 

 

If you are looking at doing the same and think I may be able to help you then feel free to contact me. 

Please enjoy the features knowing that I invested quite a bit of time implementing them :)

 

 

Last modified on Thursday, 18 August 2016 16:04

Go to top