Monday, January 3, 2011

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.

9 comments:

  1. It is not working on my iPhone :(

    ReplyDelete
  2. Just wanted to le you know that I posted about a similar method for this challenge on my blog. Perhaps that idea can be used for your project. I hope it helps you. It makes Soundcloud tracks play on any iPhone or iPad.

    Regards

    ReplyDelete
  3. @Dimitry: Hrmmm, can't say why it doesn't work at your end.

    @technolux: Thanks for your comment! Yes, I've read your (in depth and excellent) articles regarding this matter! However, I wanted to avoid mentioning the programs, which you refer to in your article(s) - due to various reasons.
    That being written, using those programs does make things a lot easier, and I will pretty soon post an article referring to your blog.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Can you explain more elaborately? I'm lost at steps 2&3. I'm on Firefox and don't know where the windows are to flush the cache and copy the URL you mention.

    ReplyDelete
  6. I've tried this method, and it seems to work fine when using Chrome. But if I switch to Firefox, I see that if Flash is enabled, it still shows the HTML5 content so that you end up with both. Not sure what's wrong there.

    ReplyDelete
  7. Some very belated replies:
    @Skeliskel09:
    I think that you might want to consider reading technolux' similar (and excellent) articles for an easier approach regarding how to do...
    (http://technolux.blogspot.com/)

    ReplyDelete
  8. @Marshall B.:
    I'm not really sure, how/why this has happened on your FF.
    I've just tried out the code (AGAIN) on both FF 3.6 and 4, respectively - and I haven't experienced at any point, what you've described.

    A test-file can be seen here:
    http://dee3.freehostia.com/sc.php

    Otherwise, I hope that you've figured out what went wrong, since you've posted your comment.
    :-)

    Otherwise - just post again...

    d.

    ReplyDelete
  9. Ok, apparently it only shows both if you use the original embedded code; I switched to the modified version and it behaves as you expect. Funny that it only affects Firefox. So... to ensure full Firefox/Chromium/Safari/etc. compatibility, the slimmed-down version is critical.

    ReplyDelete