Как получить код встраивания Soundcloud по URL-адресу soundcloud.com

Я часами занимался исследованиями, и мне не повезло, что это сработало. В основном у меня есть cms, в котором пользователи могут поместить URL-адрес soundcloud, например, " https://soundcloud.com/cade-turner/cade-turner-symphony-of-light ", тогда на странице может отображаться встроенный фрейм. Я немного переписал api docs, но не нашел ничего подходящего. Этот пост здесь говорил, но я просто не совсем понял ответы, и я проверил ссылки oEmbed и oEmbed, но не смог найти подходящий пример. У кого-нибудь есть еще намеки?

Редактировать: Благодаря ответу Джейкоба, мне наконец удалось сделать это с помощью 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
    }
);

Ответы

Ответ 1

Для выбранного трека код вставки такой:

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

Единственное, что уникально для него, это ID дорожки, в данном случае это 101276036.

Таким образом, ваша настоящая проблема заключается в поиске идентификатора пути, когда у вас есть только URL-адрес, а Soundcloud API предоставляет метод, называемый " resolve сделать именно это".

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)

Затем вы можете сохранить этот идентификатор или создать и сохранить HTML-код, который вы хотите отобразить.

Ответ 2

Я нашел это в своих кодах, чтобы точно указать вашу цель, даже если вам нужно было зарегистрировать идентификатор клиента.

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

Ответ 3

Я искал что-то подобное и нашел это очень полезным:

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

Просто попробуйте эту команду CURL:

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

Или этот запрос jQuery ajax:

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

Ответ 4

Это javascript-решение на основе jQuery, которое я написал.

Он не требует идентификатора клиента.

Убедитесь, что jQuery включен, и добавьте это в <head> вашего документа:

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

Чтобы вставить проигрыватель Soundcloud на страницу, создайте <div>, назначьте ему класс sc-embed и sc_url ему атрибут sc_url, который должен быть установлен на URL-адрес страницы Soundcloud.

Например:

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

Чтобы вставить несколько игроков, используйте несколько <div> с разными значениями для sc_url.

Вы можете изменить переменную params в Javascript, чтобы включить или отключить параметры игрока, перечисленные здесь: https://developers.soundcloud.com/docs/oembed#introduction

Ответ 5

Я столкнулся с той же проблемой, что и выше. У меня есть старый код для встраивания, который больше не работает, и, к сожалению, я ограничен только HTML. Видя ответы выше, это просто не работает для меня. Поэтому я решил, я просто попробую кое-что и посмотрю, работает ли это, и, о боже, это действительно работает! Вам больше не нужно конвертировать вещи. Вы можете просто использовать старый URL. Вот HTML-код для меня:

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

Я добавил выше, чтобы сделать его читабельным, но он должен быть одной строкой кода.

Причина в том, что я запускаю это на форуме с пользовательским режимом BBCode, где я хочу поддержать его следующим образом: [soundcloud=Artist]song[/soundcloud]

В приведенном выше случае это [soundcloud=LPChip]Internal-meganism[/soundcloud].

Фактический HTML-код для BBCode выглядит следующим образом:

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

Это работает для SMF 2.0.15 с custom BBCode mod, установленным как непарсированный равный контент.

демо: https://nifflas.lp1.nl/index.php?topic=6630.0

Ответ 6

Я сделал это таким образом, в javascript, без использования 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);
});