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

THE FOLLOWING ARTICLE IS NOW TECHNICALLY OBSOLETE!
PLEASE CLICK HERE FOR THE UPDATED VERSION!

-------------------------------------------------------------------------------------------------

This posting falls under the more geeky categories of things, but nevertheless
might be of some interest for all of Soundcloud-submitters/-users out there!


As we all know, Soundcloud offers it's users the ability to share it's players
in various places in various ways; furthermore, Soundcloud also offers some
code so that one can also embed and use Soundcloud's player on one's own
website, blog, whatever!


The embed-code, which one can paste into the HTML-code of one's website,
blog etc., will then generate something like the player shown below: 

595 SESSION 01 - Introduction To 595 by wildtek


However, this otherwise excellent player (which does it's job quite nicely too, BTW)
is SWF-based; well knowing that Soundcloud's players (on their site) work perfectly
well on iPads, their SWF-based players intended for embedding on webpages outside
of Soundcloud obviously won't work, if rendered on iPads and/or iPhones...!


Something which also has been mentioned on Soundcloud's own support-pages - for
example here and here


Therefore, I been trying to work out a simple HTML5-based fallback mechanism for
Soundcloud's embedded players, so that if an iPad or iPhone comes across a webiste
with the SWF-embedded player, instead of showing zilch would then show something
more functional (and musically playable) as the native-player depicted below:

But "How...?" could one ask - and here's - IMHO - the answer regarding how to go about this;
in the following below are two code examples with Soundcloud's original embed-code with the
HTML5 audio-tag embedded for the "iWhatever"-fallback and a slimmed and trimmed down code,
based on Drew McLellan's Satay-method and also with the with the HTML5 audio-tag fallback
mechanism, followed by the "how-to-do"-instructions for the implementation side of things.

Soundcloud's original embed-code with the audio-tag embedded (The "quick & dirty"-way):

<object height="81" width="100%">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F2197494"></param>
<param name="allowscriptaccess" value="always"></param>
<embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F2197494" type="application/x-shockwave-flash" width="100%">
</embed>
<audio style="width:100%; height:15px" src="http://media.soundcloud.com/stream/rYl37zjX02TL?url=http%3A//api.soundcloud.com/tracks/2197494" controls preload="none">
</object>

The modified, slimmed-down embed-code with the audio-tag embedded:

<object data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F2197494" type="application/x-shockwave-flash" height="81" width="380">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F2197494" />
<param name="allowscriptaccess" value="always" />
<audio style="width:100%; height:15px" src="http://media.soundcloud.com/stream/rYl37zjX02TL?url=http%3A//api.soundcloud.com/tracks/2197494" controls preload="none"></audio>
</object>

How-to-do:

1. Copy and paste Soundcloud's embedded player onto the webpage, where you want it to appear, with supplied embed-code from your artist-page on Soundcloud
2. Flush your browser's cache, reload your webpage with the now embedded player, and press "Play" on the player
3. Refresh your browser's cache window, and look for a cache-list entry that looks something like this "http://media.soundcloud.com/stream..."
4. Copy the above-mentioned URI, but only the first part of the string - as in the following: http://media.soundcloud.com/stream/XXXXXXXXXXXX?url=http%3A//api.soundcloud.com/tracks/YYYYYY
   (note: "XXXXXXXXXXXX" is a 12 character alphanumerical string, where the "YYYYYYY" is a seven digit string; see the bolded code-strings in the code-examples above)
5. If using Soundcloud's unaltered embed-code, then insert between the closing embed- and object-tags the html5 audio-tags with the necessary URI- and values, then paste the aforementioned URI from Soundcloud in as the "src"-value in the HTML5-code; but the second slimmed-down embed-code with the audio-tag embedded is the one you should use - just stick the HTML5 audio-tags and values in between the last "param"-tag and the object-end tag, then you should be good to go...
   (again: see the bolded code-strings in the code-examples above)...
6. Save your endeavors/publish/whatever - and that's it

Here's a working example that you can check out on your "iWhatever":





As for now, this solution works, and I'd like to say thanks a lot to Vergel Evans (http://www.humanjava.com/) plus some of my students (to remain unnamed, so they won't get hung out by their peers for being a "teacher's pet") for volunteering to test this solution (or: workaround) out!


Also please note that this solution works for now; I can't nor won't guarantee it'll work after the next major girlie-name technical overhaul Soundcloud puts it's site through; but one can hope that they'll re-jig the code for their embedded player, so any forthcoming player has a similar fallback mechanism!


(And to Soundcloud: go ahead and use the code in this post, but remember to send a check to me...) ;-)


Thanks for reading this...
d.