How To Get Soundcloud Embed Code By Soundcloud.com Url

April 01, 2024 Post a Comment

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-tur

Solution 1:

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 pageecho str_replace('height="400"', 'height="140"', $jsonObj->html);

Solution 2:

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

<iframewidth="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.

Solution 3:

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);
});

Solution 4:

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:

Baca Juga

<scripttype="text/javascript">document.addEventListener("DOMContentLoaded", function(event) {
    (function ($) {
        $.fn.scembed = function(){
        var datasource  = 'http://soundcloud.com/oembed';
        returnthis.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:

<divclass="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

Solution 5:

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

JavaScript Sample