19

I have been researching for hours with no luck to get it worked. Basically I have a cms in which users can put soundcloud url like this "https://soundcloud.com/cade-turner/cade-turner-symphony-of-light", then the page can show an embedded iframe. I have red the api docs for a while but couldn't find anything relavant. This post here have talked but i just didn't quite understand the answers and I checked oEmbed and oEmbed reference but couldn't find proper example. Any one has any more hints?

Edit: Thanks to Jacob's answer, I finally managed to do it by using ajax. 

var trackUrl = 'THE_URL';
var Client_ID = 'CLIENT_ID';//you have to register in soundcound developer first in order to get this id 
$.get(//make an ajax request
    'http://api.soundcloud.com/resolve.json?url=' + trackUrl + '&client_id=' + Client_ID, 
    function (result) {//returns json, we only need id in this case
        $(".videowrapper, .exhibitions-image, iframe").replaceWith('<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + result.id +'&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>');//the iframe is copied from soundcloud embed codes
    }
);
Community
  • 1
  • 1
Andrew Liu
  • 2,478
  • 5
  • 22
  • 29

8 Answers8

35

I found this in my codesnippets for exactly your purpose, even withouth having to register a client ID.

//Get the SoundCloud URL
$url="https://soundcloud.com/epitaph-records/this-wild-life-history";
//Get the JSON data of song details with embed code from SoundCloud oEmbed
$getValues=file_get_contents('http://soundcloud.com/oembed?format=js&url='.$url.'&iframe=true');
//Clean the Json to decode
$decodeiFrame=substr($getValues, 1, -2);
//json decode to convert it as an array
$jsonObj = json_decode($decodeiFrame);

//Change the height of the embed player if you want else uncomment below line
// echo $jsonObj->html;
//Print the embed player to the page
echo str_replace('height="400"', 'height="140"', $jsonObj->html);
Henning Outspoken
  • 451
  • 1
  • 4
  • 3
12

For the track you selected, the embed code is such:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/101276036&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>

The only thing unique to it is the Track ID, in this case it's 101276036.

So your real issue is trying to find the Track ID when you only have the URL, and the Soundcloud API provides a method called resolve to do just that. 

require_once 'Services/Soundcloud.php';
$client = new Services_Soundcloud('YOUR_CLIENT_ID');
$track_url = 'https://soundcloud.com/cade-turner/cade-turner-symphony-of-light'; // Track URL
$track = json_decode($client->get('resolve', array('url' => $track_url)));
$track->id; // 101276036 (the Track ID)

You can then store this ID, or generate and store the HTML that you want to be displayed.

Jacob Budin
  • 9,753
  • 4
  • 32
  • 35
  • Where did you get this code from? I cant get this to work. Where do you get "Services/Soundcloud.php" from? – R2D2 Jun 22 '15 at 18:23
  • 2
    @Richard Soundcloud has mysteriously scrubbed their documentation of the PHP SDK. But based on [this blog post](https://blog.soundcloud.com/2009/09/18/php-wrapper/), the [HTTP API guide code snippets](https://developers.soundcloud.com/docs/api/guide) are probably based off of the [mptre/php-soundcloud](https://github.com/mptre/php-soundcloud) project. – Jacob Budin Jul 04 '15 at 21:03
12

I was looking for something similar and found this really helpfull:

https://developers.soundcloud.com/docs/oembed#introduction

Just try this CURL command:

curl "http://soundcloud.com/oembed" -d 'format=json' -d 'url=http://soundcloud.com/forss/flickermood'

Or this jQuery ajax request:

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://soundcloud.com/oembed",
  "method": "POST",
  "headers": {},
  "data": {
    "format": "json",
    "url": "http://soundcloud.com/forss/flickermood"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});
robbe clerckx
  • 415
  • 5
  • 16
3

I ran into the same problem as above. I have old embed code that no longer works, and unfortunately for me I'm limited to HTML only. Seeing the answers above this just doesn't work for me. So I decided, I'll just try something and see if it works and oh my, it actually works! No longer do you have to actually convert stuff. You can just use the old url. Here's the html code for me:

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/LPChip/internal-meganism
&color=%23ff5500&auto_play=false&hide_related=false
&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
</iframe>

I've added enters above to make it readable, but should be one line of code.

The reason is that I run this on a forum with a custom BBCode mode, where I want to support it as follows: [soundcloud=Artist]song[/soundcloud]

In the above case, this is [soundcloud=LPChip]Internal-meganism[/soundcloud].

The actual html for the BBCode is as follows:

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/{option1}/{content}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

This works for SMF 2.0.15 with custom BBCode mod, set as unparsed equal content.

demo: https://nifflas.lp1.nl/index.php?topic=6630.0

LPChip
  • 792
  • 1
  • 11
  • 25
2

This is a jQuery-based Javascript solution which I wrote.

It doesn't require a Client ID.

Make sure jQuery is included, and add this to the <head> of your document:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
    (function ($) {
        $.fn.scembed = function(){
        var datasource  = 'http://soundcloud.com/oembed';
        return this.each(function () {
            var container = $(this);
            var mediasource = $(container).attr("sc_url");
            var params = 'url=' + mediasource + '&format=json&iframe=true&maxwidth=480&maxheight=120&auto_play=false&show_comments=false';
            $.ajaxopts = $.extend($.ajaxopts, {
                                url: datasource,
                                data: params,
                                dataType: 'json',
                                success: function (data, status, raw) {
                                    $(container).html(data.html);
                                },
                                error: function (data, e1, e2) {
                                    $(container).html("Can't retrieve player for " + mediasource);
                                },
                            });
            $.ajax($.ajaxopts);
            });
        };
    })(jQuery);

    $(function(){
        $("div.sc-embed").scembed();
    });
});
</script>

To insert a Soundcloud player into a page create a <div>, assign it a class of sc-embed, and give it an attribute named sc_url, which should be set to the URL of the Soundcloud page.

For example:

<div class="sc-embed" sc_url="http://soundcloud.com/forss/flickermood"></div>

To insert multiple players use multiple <div>s with different values for sc_url.

You can alter the params variable in the Javascript to enable or disable player options as listed here: https://developers.soundcloud.com/docs/oembed#introduction

Missy
  • 41
  • 2
2

I'm not sure if anyone tried this before, but currently (Feb 2021) It's working to just pass the basic soundcloud link into the iframe link's ?url parameter. The "official" embed code uses another ID, but the regular link works fine too (for now).

For example, this link to soundcloud can be embedded as https://soundcloud.com/anton-jarvis-206182017/loves-philosophy-by-percy-bysshe-shelley

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/anton-jarvis-206182017/loves-philosophy-by-percy-bysshe-shelley&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

Props to @lpchip for his answer that inspired me to try this

Kevin
  • 4,225
  • 2
  • 37
  • 40
1

I've done it this way, in javascript, without using jQuery:

var formData  = new FormData();

formData.append("format", "json");
formData.append("url", "http://soundcloud.com/forss/flickermood");

fetch('http://soundcloud.com/oembed', {
    method: 'POST',
    body: formData
}).then(function (response) {
    console.log(response);
});
Bjørn Nyborg
  • 993
  • 7
  • 17
0

Here is an example in PHP with CURL

// Generated by curl-to-PHP: http://incarnate.github.io/curl-to-php/
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, 'http://soundcloud.com/oembed');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, "format=json&url=http://soundcloud.com/forss/flickermood");

$headers = array();
$headers[] = 'Content-Type: application/x-www-form-urlencoded';
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}
curl_close($ch);
Yaniv Levy
  • 78
  • 10