The Joomla! Forum ™

For over a year I have been searching high and low for a HTML5 audio playlist player with flash fallback for Joomla 1.5 to 2.5 yet all I find are mountains of Flash players. I came across a couple of good HTML5 video players, yet no audio players, which can simply list a bunch of audio files and play them, with the appearance customizable with a CSS file. I would have thought that this would be a standard type of extension, and I don't understand why there don't seem to be any listed in the JED. If no reliable extensions exist, how does one play cross-browser audio on all devices via the simplicity of a Joomla extension?

I usually try to find answers myself before asking the forum, but I am at a dead end for something I would have thought would be amongst the most popular extensions. Could anybody direct me to customisable HTML5 audio playlist players made for Joomla that I may have somehow overlooked?

Any thoughts or help is greatly appreciated.

Thanks. Nick.

Here is what my player looks like.

Really easy to set up, can do single or playlist files.

http://ronniek.com/index.php/demos/production-demo

Simple MP3 Player 1.7.1 is what it is. In the directory on joomla.org.

Thanks for the reply Ronniek. That is a flash-based player though. If it was HTML5 with flash fallback it would be perfect. I'm still open to checking out any HTML5 audio playlist player extensions for Joomla. They don't seem to exist.

Nick

Try looking at widgetkit lite, installs as a component and you can enable the media player and then just embed the audio tags into your content or do what I did and create a customhtml module with the audio stuff embedded. I'm only doing one track for now but looking to see if it will help me run multiples.

http://www.yootheme.com/widgetkit/downl ... out=single

CHeers

Darren

Thanks Darren. I'll definitely check it out and try it to see if it can play multiple MP3s and if the layout/appearance can be customised and I'll let you know. I would still appreciate people pointing out other options so that we know wthat they all are. It still seems very strange that there's not an obvious straight-forward HTML5 audio extension. Thanks. Nick.

I actually managed to do it with one track without even needing widgetkit lite. Multiple tracks seems to be problematic and requiring javacscript and additional enhancements for the skip forward and back stuff.

here's the code I used in my custom-html module without widgetkit:



This enables the browser's own HTML5 audio player and if you add autoplay="autoplay" and loop="loop" then it'll start on pageload and repeat.

Will let you know if I find anything further that deals with the multiple tracks but I agree I would have expected something long before now that would deal with this from an open standards perspective.

Darren

Nice work man - this is very good to know. Keep me posted re how far you can develop it. Of course in the meantime if anyone else wants to chime in a show us a fully-functional Joomla HTML5 audio player, that would save you a whole heap of time. I have found a couple of obscure leads - I'm following them up as we speak. If they turn out to be something I'll let you know. But seriously, it shouldn't have to be this difficult.

I did spend months trying to get JPlayer to work on my site by installing it manually (not the JPlayer in the JED, but the JPlayer on http://www.jplayer.org - they are unrelated). However there were too many problems with conflicts and browser issues. If someone could make a reliable Joomla extension for this HTML5 JPlayer, then that would solve everything.

Nick.

.
Are you looking for an HTML5 player for an actual playlist (as in a playlist file)?
Or simply a list of MP3s with HTML5 players?

It appears that the MP3 Browser plug-in can be updated/enhanced to use an HTML5 player.
See MP3 Browser example here (at bottom of page):
http://www.dotcomdevelopment.com/joomla/joomla-downloads/plugins/168-mp3-browser-for-joomla-1-6

The MP3 Browser plug-in creates a table of the MP3s found in a specified directory.
And displays in a table format some information and a Flash-based player for each track.

I started studying/modifying this plug-in yesterday and it appears that the MediaElement.js player could be used.
The MediaElement.js player is the same HTML5 player used in the WidgetKit mentioned above.

JPlayer.js looks like a much more difficult player to use in a modified MP3 Browser plug-in.
Both JPlayer.js and MediaElement.js use jQuery, so JavaScript conflicts are possible (but may be handled).

Test the MediaElement.js player MP3 audio player example here: http://mediaelementjs.com/
Please test your devices and other players and see if that works for you.
I would like your feedback.

The MediaElement.js player appearance can be changed using just CSS "skins" (incl. images).
And the various controls can also be enabled/disabled from appearing on the controls bar.
How would you like it to look? Provide examples if possible.
.

_________________
██ AllMedia4Joomla Project
██ http://sourceforge.net/projects/allmedia4joomla/
██ AllMedia YouTube Feed Gallery module released
██ Download: http://sourceforge.net/projects/allmedia4joomla/files/

.
Got the MediaElement.js HTML5 player working with an MP3 playlist.
Using MP3 Browser as the starting point I have been adding players and other features.
The plug-in reads the MP3 files from a directory and creates a table of info and players.

Below is a screenshot of the work-in-progress.
Yes, it is ugly (currently) – that is the MediaElement.js default skin.
Will need some other skins.

This is using the <audio> tag and should work on all browsers and devices.
Tested on Firefox, IE9, Opera, and Safari. All work fine.

I think it also supports accessible media guidelines.
Tabbing and keyboard controls appear to work.

_________________
██ AllMedia4Joomla Project
██ http://sourceforge.net/projects/allmedia4joomla/
██ AllMedia YouTube Feed Gallery module released
██ Download: http://sourceforge.net/projects/allmedia4joomla/files/

Hi Kenmcd - thanks your your detailed replies, they are very helpful and much appreciated. To answer the first question you asked re purpose/function of the playlist, just think of what you would need for a recording artist's website, similar to the player that MySpace has - a list of MP3s, you click on them, they play in one player. A pop-out stand-alone player option would be ideal too. I would then use CSS and a bit of Photoshop to change each element's background to make it look the way I want - standard CSS.

I will definitely check out the MediaElement player, however separate play bars for every track is not really going to work space-wise and aesthetically. If it is the only option then yes I'll have to go with that, as it is better than visitors not being able to hear the artist at all on thier non-flash devices.

I guess though, although there are a couple of potential experimental work-arounds, a HTML5 audio player for Joomla that you would upload/install as a customisable Joomla module as per a normal extension doesn't exist? My mind is still blown at how this is the case. Joomla is incredible and used by millions of websites, but can't play standard music files due to lack of extensions (without manual tech work-arounds)?

I came across MediaElement a while ago when I was searching, so I will go back and read more about it based on your information, so thanks. I hope this topic stays active until all the best options for HTML5 audio are known to Joomla users, whatever they may be. Nick.

The problem is not Joomla or any other CMS, the problem is the limitations of the iDumb devices.
Apple does not give a crap that users cannot play MP3s from the average website.
They want to sell their M4A files into the device through their proprietary channels.

What could be done in minutes with a Flash-based player now takes hours and many, many lines of JavaScript.
So until there is a free, open source, working HTML5 playlist player there is not likely to be a free Joomla extension.

There hard part is getting the playlist created, and getting it into the player.
Where is the support for standard playlist formats in any "HTML5" player - MRSS, XSPF, M3U, SMIL, etc.?
Why wasn't any standard playlist support built into the iDumb devices' hardware players?
Most of the players you see out there on websites are very custom, very complex, and built using a lot of JavaScript.

There is a playlist generator for jPlayer.js: http://jplaylister.yaheard.us/v_0.6/
Minimal documentation and the demo files do not work.

There is a playlist player for MediaElement.js: https://github.com/bensmithett/MediaElement.js-Playlist
No documentation and the demo files do not work.

So the only option right now is to build the playlist yourself in JavaScript or PHP.
And feed that into the players available.
The easiest option right now seems to be MediaElement and PHP, and build the playlist that way.
Guess it could also be done with jPlayer, but build the JavaScript playlist code.

Regarding what you are looking for visually, jPlayer has an audio playlist player demo here (at the bottom):
http://jplayer.org/latest/demo-02-multi/

Looks like this:


But that playlist is in that page, not generated or built from a directory list, or from a playlist file.

You could replicate that player in a custom module.
Take the code from the page, modify the tracks listed.
Add the JavaScript and CSS files using Sourcerer.
A manual process, but it would work.

.

_________________
██ AllMedia4Joomla Project
██ http://sourceforge.net/projects/allmedia4joomla/
██ AllMedia YouTube Feed Gallery module released
██ Download: http://sourceforge.net/projects/allmedia4joomla/files/

Thanks for the detailed response Kenmcd. I guess, although that is not really good news at all, you have clarified where the situation is at and what options are there for me (and everyone else); and this was what I needed to achieve by posting this topic, so thanks again.

Practically speaking, I guess it's back to the drawing board with jPlayer. I tried to get it to work for months following the exact instructions, with no luck, despite removing all other jquery/javascript extensions to ensure that there was no conflict. Since I am at an absolute loss re why it doesn't work, I will probably upload a draft of the site and hope that someone can take a look and tell me what the problem is. I almost always troubleshoot things myself but with jPlayer I am frustrated beyond self-help. Nick.

.
Post a link to the page and I may be able to help you get it working.


As a sort of proof-of-concept I put the jPlayer Playlist code in a module shell to test it.
Works, but it appears the Beez 2 CSS messes-up the player layout.
Had to disable some of the Beez 2 CSS for the player to work properly.
Your template may not have this issue.

Example:



.

_________________
██ AllMedia4Joomla Project
██ http://sourceforge.net/projects/allmedia4joomla/
██ AllMedia YouTube Feed Gallery module released
██ Download: http://sourceforge.net/projects/allmedia4joomla/files/

Nice work - thanks. I'll try this again and if I have no luck I'll definitely get it online and troubleshoot it. Again, your response is greatly appreciated. Nick.

Hi kenmcd - yep, still having no luck getting jPlayer to work. I've uploaded a bare-bones example to http://www.zzztestzzz.com I simply followed the instructions in the user guide but it doesn't work for me. This is only a single player, whereas I need the audio playlist (no video), but I started here to just get it working first. I see there is an add-on for that but there are no instructions re how to implement that so I haven't a clue how to get that happening, and that's what I really need.

From what I can tell, IE8 doesn't recognise the path to SWF, and Firefox just doesn't play it. I'm obviously going wrong somewhere with the javascript.

If you could offer any guidance re how to get the audio playlist player on this site, or at least feedback on why it isn't working, then you would bring a year of mind-torture to an end! Advanced coding isn't my forte, and I'm not sure what you did exactly, but any help you can offer will be greatly appreciated. Who knows, perhaps it's just some tiny little oversight. Thanks again. Nick.

.
Not sure how you embedded that player code.
But it is not working for a few reasons.

JQuery is not loading at all.
Looks like the jQuery++ Intergator plug-in is screwing things up.
I see thisand thisin the page HTML.
The first link is broken and the second link is disabled.
So I would disable that plug-in and/or figure-out why it is not working properly.

The best way to test is to first upload the demo files and look at those.
The demo-02-pf.htm demo file is an audio playlist.

The playlist also requires loading the playlist JavaScript file.
Look at the demo page <head>.

The SWF file location is set in the player initiation script.
Look for a line like:
in the initiation code.

I suggest you get a playlist demo page working first before trying to embed in Joomla.
Change the playlist files for your files.
Change the line which tells the player what type of files are in the playlist.
For exampleshould be

Get that demo page working and you could simply embed that player in an IFrame, in an article or in a module.
.

_________________
██ AllMedia4Joomla Project
██ http://sourceforge.net/projects/allmedia4joomla/
██ AllMedia YouTube Feed Gallery module released
██ Download: http://sourceforge.net/projects/allmedia4joomla/files/

Kenmcd - thank you my friend - you've brought all my seemingly endless audio player problems to an end. I did get rid of the jQuery integrator extension, but the real breakthrough was simply putting jPlayer in an iFrame. That of course avoided any conflict or loading issues. Works perfectly. So I guess at the end of this I can say that jPlayer is the solution.

I can't thank you enough - I'd imagine this is gonna help a lot of other people too.

Thanks again. Nick.

Hi kenmcd .. you are genius

this is exactly what i need, i have joomla 1.5 with mp3 browser but it doesn't work with ipad .. how can we get it!! and how about joomla 2.5 cause i'm looking for it too

I have been looking for a non-flash HTML5 player that could handle multiple instances on the same page. I found one and the developer modified it slightly so it would work. I am really very happy with the result.

The extension is called "HTML5 Simple MP3 Player" and it is available on the JED at http://extensions.joomla.org/extensions ... lery/20783. It is a commercial extension but the price is insignificant when you get what you want in very minimal time.

I used it to put about 15 mp3's into a list with title and player next to each. Any mp3 that a user chooses buffers and plays.