Soundcloud JS API connect method not working

Question

Soundcloud JS API connect method not working

557 views Asked by Sergey Scopin At 09 September 2024 at 15:45

I'm trying to make client side application to get tracks from soundcloud according to docs I've added <script src='http://connect.soundcloud.com/sdk.js'></script> to <head> of my site. And added following code as docs says to my js.

//I've replaced YOUR_CLIENT_ID with my client id I got when registered my app and http://example.com/callback with my callback.html also I've filled redirect uri field with it.
    SC.initialize({
      client_id: 'YOUR_CLIENT_ID',
      redirect_uri: 'http://example.com/callback'
    });
    
    // initiate auth popup
    SC.connect(function() {
      SC.get('/me', function(me) {
        alert('Hello, ' + me.username);
      });
    });

Also I've created callback.html

<html lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Connect with SoundCloud</title>
  </head>
  <body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
    <b style="width: 100%; text-align: center;">This popup should automatically close in a few seconds</b>
  </body>
</html>

Now I get popup window where I can enter my email and password and when I enter it, I got message: This popup should automatically close in a few seconds. But it's not closing. In console I got message:

Uncaught SecurityError: Blocked a frame with origin "http://sscopin.temp.swtest.ru" from accessing a frame with origin "swappedout://".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "swappedout". Protocols must match

Also I don't see any alert, so I suppose that it's not connected.Also console.log of SC shows me SC object. Solutions? Suggestions?

Original Q&A

There are 3 answers

**Sergey Scopin** · Answer 1 · 2015-06-14 13:08:35

Read more docs. Here I've found, that it's not necessary to use rederict_uri at all. Only client_id. Also here I've found how to get tracks uploaded by people. So, it's quite simple. To play tracks from user we should:
1. Initialize object with our client_id obtained after registration of application.

    SC.initialize({
        client_id: 'my_client_id'
    });

To get track id we should:

SC.get('/users/Username/tracks', {limit: 100}, function(tracks){
        console.log(tracks);
});

Username is in settings>profile>profile url of soundcloud. Tracks is an list of objects where there is an id property that we can use next
3. To add playing of track on click

$('#loadTracks').live('click', function(){
    SC.stream('/tracks/track_id', function(sound){
        sound.play();
    });
});

**Rutvik Bhatt** · Answer 2 · 2015-10-16 11:27:54

The error itself is mentioning the solution. Make sure both, redirect url and the web page that causes that pop up, have the same URL pattern including the protocol like http://

E.g:

URL that causes pop up for login : http://www.example.com/soundcloud.php

Callback URL : http://www.example.com/callback.php

If you forget to write http or www then window.opener object will not work and can not identify child window.

**Mentasm** · Answer 3 · 2016-01-05 07:56:47

In Soundcloud's sample callback.html, the code:

<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">

must be altered to:

<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">

This allows the popup to close properly and completes the login flow if the application settings are correctly configured to the same domain (localhost or production, but not a mix of the two).

TechQA.

Soundcloud JS API connect method not working

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in SOUNDCLOUD

Popular Questions

Popular Tags

Trending Questions