Saturday, September 3, 2011

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

Earlier this year, I posted an article on how to make a iPad-/iPhone-fallback for Soundcloud's embedded player (using HTML5).

This article has garnered a lot of interest hit-wise (and still does, apparently), but there's been some changes that have technically taken place at Soundcloud, which has rendered the aforementioned article's "how-to" obsolete!

Fortunately, for all of you that are interested in playing Soundcloud-tracks on your iPads/iPhones, tech-blogger Technolux has recently posted an article, which shows you how to get SoundCloud-tracks playing on any iPhone, iPad and iPod Touch - and even without using the embedded SoundCloud Player for websites, or having the iPhone SoundCloud App installed...!

That being said (or written), if one still wants to use Soundcloud's embedded flash-based player, the coding-details in my previously mentioned article regarding the modified, slimmed down embed-code with the HTML5 audio-tag embedded as a fallback, still applies!

The modified, slimmed embed-code, with the audio-tag fallback, AND using Technolux' technique:
<object data="http://player.soundcloud.com/player.swf?url=http://api.soundcloud.com/tracks/3417006" type="application/x-shockwave-flash" height="81" width="420">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http://api.soundcloud.com/tracks/3417006" />
<param name="allowscriptaccess" value="always" />
<audio src="http://media.soundcloud.com/stream/95dbKjNkBNaZ" controls preload="metadata" style="width:420px;"></audio>
</object>

(The bold line of code relates to Technolux' "how-to" in his aforementioned article)

Which should render this:



Whilst in write-mode, I'd like to say thanks a lot to Technolux for the ongoing mail-dialogue!

Thanks for reading this,
d.

13 comments:

  1. Holy Don,
    I come back from a little vacation and you have written an entire post thanking or at least mentioning me for the SoundCloud hack . Well thanks for that, truly appreciated but your work on the fallback is what I think initially got me working on it. The fruits of our labor or should I say emails? Man we really need to be in touch more! Thanks again!

    ReplyDelete
  2. Hi, Firstly I am clueless when it comes to coding. I'm an iWeb user, guilty as charged.

    The code you provide works great. It works both in my laptop and my iPhone. However, I was wondering if you could post a version for the mini sound cloud player, which auto plays (before fallback obviously, I know phones won't do auto play).

    Thanks in advance. Luke

    Oh, also, though the code you have works, when viewing the fallback on my iPhone only the bottom half of the quicktime player is viewable. Still enough to hit the play button though!

    ReplyDelete
  3. Hiya Luke!
    And thanks for your comment!
    Regarding one of your questions, you'll be getting a mail later today.

    Although, I can't say that I've experienced what you've wrote regarding the player's height on an iPhone, but I'll gladly look into this!
    BTW, which iOS are you using?

    'laters,
    d.

    ReplyDelete
  4. Wow. this is great, and thank you. However, even though I swap out the bold stream link in your above example (for one of my own), my page only ever plays your track. Is the audio src= link the only thing that needs to be swapped out, or url=http://api.soundcloud.com/tracks/3417006 as well?

    Thank you for putting the time and effort into helping us out.

    Much appreciated

    ReplyDelete
  5. @fragilante:
    Both the "audio src=..."- and the flashvasrs "url=..."-URI's need to be swapped, dude!
    'hope this'll sort you out...! :-D
    d.

    ReplyDelete
  6. It worked. Thank you so much! Took a little while to work out where the ID # was, but... it's done. Thank you.

    ReplyDelete
  7. My searching is ending here. Thanks for the post. Its really helping me to recover the problem.
    Vee Eee Technologies| Vee Eee Technologies|

    ReplyDelete
  8. Hey guys... i cant find the links on my soundcloud account e.g. "http://media.soundcloud.com/stream/95dbKjNkBNaZ"
    and

    url=http://api.soundcloud.com/tracks/3417006

    I can find the following but i dont think that is what is required... http://soundcloud.com/bob-martin-1/ultimate-cyn

    What is the sollution please, this is dcriving me crazy.

    Thanks in advance.

    Bob Martin

    ReplyDelete
  9. Is the a way to Code the soundcloud player to playback self hosted mp3files?

    ReplyDelete
  10. @Bob Martin: Read Technolux' blog-post...
    @dj-mizu: Definitely no - but you could use (for example) google's mp3-player, instead.

    ReplyDelete
  11. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 audio player

    ReplyDelete
  12. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 audio player

    ReplyDelete
  13. I agree! But I do consider HTML5 to be more than just the spec that the W3C validator checks your document against. Part of html5 media playerinvolves standards for bolt on technology including web workers, CSS3, server sent events, etc. that are going to (I hope) revolutionize the web and do away with the need for 3rd party browser plugins

    ReplyDelete