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.
Posted by donvoorhies at 9/03/2011 10:12:00 AM

10 comments:

  1. TechnoluxSeptember 21, 2011 at 4:48 AM

    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. SWISS LIPSOctober 7, 2011 at 8:31 PM

    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. donvoorhiesOctober 8, 2011 at 12:12 PM

    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. fragilanteOctober 18, 2011 at 10:52 PM

    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. donvoorhiesOctober 19, 2011 at 12:21 AM

    @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. fragilanteOctober 19, 2011 at 4:20 AM

    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. LauraineNovember 14, 2011 at 7:34 AM

    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. Bob MartinDecember 3, 2011 at 10:05 PM

    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. dj~mizuDecember 6, 2011 at 2:15 AM

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

    ReplyDelete
  10. donvoorhiesDecember 27, 2011 at 10:52 AM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)