How to dynamically embed the “tiny” version of the Soundcloud player using the JS SDK?

Question

I'm building a website for a music composer. He'd like to publish samples of his work via Soundcloud and embed some of those samples on his website. He has a Premium account.

I'd like to make this as easy as possible for him (he ain't no geek). Basically, I'd like to let him just copy & paste the song's URL from the browser's address bar and make my application do the rest for him.

That's relatively easy to do actually - and I successfully made it work with the standard version of the player. But I can't find a working way of programmatically embeding the tiny version of the player. There's no mention of the tiny player in the Soundcloud oEmbed reference and just setting the maxheight param to 18 doesn't do it for me.

The problem is, I need to actually generate the embed on every page, because the same song embedded on the home page should be rendered using the tiny player, whereas on a subpage it should be the full standard player - therefore I can't just allow him to copy&paste the embed code from soundcloud to my app, because I'd then either have a tiny player embed code or a standard player code available, not both of them. Copy&pasting two different embed codes for the same song seems too much trouble for such a simple thing.

Another thing is I can't properly test this as I don't have a Premium account myself and I don't have access to his account.. would be cool if there was a way for developers to "mock" a Premium account for development purposes...

Thanks for any and all help!

Dan

Answer 1

Unfortunately, /oembed only works for regular widget (HTML5 of flash) at the moment.

However, you can build the html for either of them yourself. Here's a template for tiny widget embed:

<object height="18" width="100%">
  <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></param>
  <param name="allowscriptaccess" value="always"></param>
  <param name="wmode" value="transparent"></param>
  <embed wmode="transparent" allowscriptaccess="always" height="18" width="100%" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></embed>
</object>

And the template for regular widget:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}{widgetParams}"></iframe>

You should put these into strings (without line breaks) and perform variable interpolation on these strings. I am not sure what language you are using, but most languages have this built in.

For JavaScript, which I'm writing most of the time, you could use Douglas Crockford’s supplant function.

The variables are trackId for which the value should be positive integer and widgetParams, for which the value should be something like &color=ff6600&auto_play=false, that is key=value pairs prefixed with &. I've used { and } as delimiters for variables to interpolate in my example, but it could, of course, be whatever your language or templates engine requires it to be.

For your client to be able to just give you a track URL, you'd need to do an API request to /resolve endpoint to retrieve track ID from track URL (permalink). You'd need to register as a developer to have client_id to authorise requests to the API. I've described how to do it in JavaScript in another answer here.

If you'd prefere not to do requests to the API, you could also ask your client to give you the embed code they can easily retrieve from any sound or set on SoundCloud by hitting "share" button, and then extract the sound or set ID using regular expression.

Here's an example of how this would work to insert a tiny widget (also using SoundCloud JS SDK) http://jsbin.com/OLUloX/1/edit