Embed HTML5 widget from normal soundcloud URL

Question

I'm trying to turn submitted Soundcloud links on my website into SoundCloud HTML5 players. I read that this is possible with oEmbed but haven't gotten it to work myself yet. What I know is that I should use the following oEmbed URL:

http://soundcloud.com/oembed?format=js&url=[escaped_url]&iframe=true

However, I have no idea what to do with it. When I have an escaped SoundCloud URL and replace it with [escaped_url], what's my next step? How do I exactly use that link to generate the SoundCloud HTML5 player?

Answer 1

Send a request to that URL, and the response will be a JSON file containing all the information you need to create the widget.

Here's an example:

$ curl http://soundcloud.com/oembed\?format\=js\&url\=https://soundcloud.com/spadgos\&iframe\=true                                 

({
  "version": 1.0,
  "type": "rich",
  "provider_name": "SoundCloud",
  "provider_url": "http://soundcloud.com",
  "height": 450,
  "width": "100%",
  "title": "nickf \u2603",
  "description": "",
  "thumbnail_url": "http://i1.sndcdn.com/avatars-000005187616-3e82aa-t500x500.jpg?b96a101",
  "html": "\u003Ciframe width=\"100%\" height=\"450\" scrolling=\"no\" frameborder=\"no\" src=\"http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F6431392\u0026show_artwork=true\"\u003E\u003C/iframe\u003E",
  "author_name": "nickf \u2603",
  "author_url": "http://soundcloud.com/spadgos"
});

Just grab the html property and stick that in your document and that should be it.