Saturday, September 10, 2011

iPad-/iPhone-fallback for Mixcloud's embedded player (using HTML5)

A couple of months ago, I've worked out a way how to "purloin" the audio-files from Mixcloud's embedded player, which in turn could be used for an HTML5-based audio player fall-back (yeah, something similar to what I've previously written about regarding the SoundCloud-player).
That being said/written - and for various reasons - I was in second-thoughts regarding, if I should post an article about it on this blog - or not!

In the meantime, tech-blogger Technolux has recently posted an article about how to download Mixcloud mixes, and since he's already (more or less) "let the cat out of the bag", I can just as well post an article then, regarding how to embed a Mixcloud-player (with the embed-code cleaned up) with a HTML5-based audio player as a fall-back for iPads/iPhones; this post is also sort of a natural continuation of the previous posting, regarding doing similar with the embedded SoundCloud-player, too...!

First step:
Read and fully comprehend Technolux' aforementioned article's instructions to find and get the necessary URL-path for the audio-file, which we'll be using in the second step.

Second step:
The cleaned up code for a given set using Mixcloud's embedded-player (including the HTML audio-tag for the "iWhatever" fall-back) looks like this:
<object width="420" height="420" type="application/x-shockwave-flash" data="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf">
<param name="movie" value="http://www.mixcloud.com/media/swf/player/mixcloudLoader.swf?">
<param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="feed=http%3A%2F%2Fwww.mixcloud.com%2Fdee3%2F4-teknology-teknology-radio-show-jan-2011%2F&embed_uuid=513fd25a-734c-46e5-b79b-6bf6a0e5c55b&stylecolor=&embed_type=widget_standard">
<audio controls preload="metadata" src="http://stream14.mixcloud.com/cloudcasts/originals/0/e/3/e/2155-2751-410d-9ddc-c39b6fa0680e.mp3" style="width:420px;"></audio>
</object>

(FYI, the HTML5 audio-tag with the found and "retrieved" URL-path to the audio-file has been set in bold the code-example above...)

This should then render something that looks like this:


Which incidentally will also fall back and render the HTML5-based audio player with the set,
if viewed on iPads/iPhones! ;-)

Thanks for reading this...
d.

P.S. The description above only works, as long as Mixcloud has this gaping loop-hole...

2 comments:

  1. Thanks for mentioning my little efforts about Mixcloud! Again, much appreciated. At the moment I am working on a little script/tool in AutoIt that will given an input of the Mixcloud Play page transform the URL to the api call, then check the 16 (if at all) stream URLs for their liveliness and then present the user with a list of available downloadable streams alongside info such as bitrate and audio file format. If you know anyone interested in that feel free send them my way, you have my email so that is fine also.

    Hope otherwise things are cool your end, still need to listen to your promo you sent and am thinking about some sort of social network account (I do sincerely hate social netowrks for some reason) since I am on none and somehow would like to know more about what you are doing with whom, when, where and how, so that we can speak about that as well as tech and/or Techno. Oh well..

    Talking about Techno I am compiling a tracklist for an upcoming mix and might ask you to review it or just give me thumbs up or down basically. Ah fuck it, tell you what, I'll b in touch sooner or later again.

    Respect and Peace!
    TL

    ReplyDelete