Audio Player 2.0.4.1 with HTML5 Fallback

FYIO: Why not support playlists?

At the time of writing this hack generic playlists (using source-elements nested inside the the audio tag) where supported only by a small subset of browsers. As the hack doesn’t insert any extra widget controlled by JS, but relies totally on the generic implementation of the audio element, there wouldn’t had been a safe way to implement playlists. Also playlists are not that common and were not an issue for the site the hack was developed for.

Maybe there’s anyone out there willing to further modify the script …
(This would require to inject multiple source-elements and setting the src-attribute of each of these elements rather than setting the src-attribute of the audio-element. But this would require prior testing for the browser’s capabilities and a smart fallback – e.g.: multiple audio-elements in a list – for those browsers only supporting the simple form of the audio-tag.)

Sample code:

[Code moderated as per the Forum Rules. Please use the pastebin]

please note that this sample logic is not setting any other attributes, which should be preferably:
controls preload="auto" autobuffer

It is not just multiple mp3s into a playlist, but also the artist & title that won’t fallback.

[audio:/halloweenz/HalloweenMadness2011_29Tracks.mp3|titles=Halloween Madness Mixtape 2011|artists=GR8FL,GR8FL] does not work

[audio:/halloweenz/HalloweenMadness2011_29Tracks.mp3] does work

But the player displays “Track #1” instead of the artist & title when viewing the flash version. ??

@masswerk – I have no idea where to insert your sample code for multiple tracks to render a playlist. I do appreciate everything you have provided so far. Thank you.

@gr8fl – this is just a rough outline of the code needed. Anyone able and willing to implement this and the according checks and preprocessing required cleanly, will also know where to implement it …

At the time being the hack only supports a single sound-url with no further attributes, which also reflects the capabilites of a simple audio-tag. Any other attributes would either be supported only be a subset of the newest browsers or require a quite complex implementation using a custom widget. (Remember: This is only a quick hack to enable a fallback for mobile devices, not a full-fledged solution.)

thanks again @masswerk. I will not mind combining all MP3s into on fat one and generating a playlist text below. What I do mind is seeing “Track #1” in the flash display. But, now I have to work my real job that pays for all this hobbying around… so will have to look later.

Sorry, if this hack doesn’t meet all your requirements and needs. It was done for a site of one of my clients and reflects the requirements of a specific installation. Just made it public, since there wasn’t any solution at this time and others were posting for a similar solution …
MIT license usually translates to “use it, change it, but no support” ??

And now the code-outline (see above) is gone – no time to write that again, Sorry.
Please re-invent the wheel again, if interested in it.

masswerk thank you for everything you have posted. I am not asking for you to do anymore work and I understand you simply wanted to share what you did.

Hi, can someone help me understand how to “glue” this piece of code (audio player with track analytics) together with masswerk′s minified version of audioplayer script.

activate:function(I,J){if(D&&D!=I){B(D).close()}D=I;
_gaq.push(['_trackPageview', '/audioplayer/'+ J['trackInfo']['artist'].replace(/\s/g,'_') +'/'+ J['trackInfo']['title'].replace(/\s/g,'_') ]);
 },

Masswerk′s minified version reads a bit different (line 137) :
... ,activate:function(playerID,info){if(activePlayerID&&activePlayerID!=playerID){getPlayer(activePlayerID).close();}

The minified version worked a treat for me. Simply replaced audio-player.js and it worked. The long version didn’t work, nor did the Flotzam version. For me at least.

https://masswerk.at/audioplayer/audio-player-html5.js