'SC' is not defined when using soundcloud SDK

1.2k views Asked by At

JS hint is giving me a 'SC' is not defined when using soundcloud SDK

SC.whenStreamingReady( function() {
'SC' is not defined

I'm prepending a variety of js files before my main file - and smashing them together... master has a jQuery closure because this is a WordPress project.

(jQuery is called by default because this is based around a WordPress install)

PREPENDED js files
fastclick (bower)
velocity (bower)
soundcloudSDK (vendor)

(all combined with)
MASTER FILE
master-script.js:

(function($){
// =============================================

"use strict";

$(document).ready(function() {

    // get track ready
    var topDown = function() {

        // soundcloud client ID
        var scClientId  = 'BLABLABLA';

        // initialize the SDK
        SC.initialize({
            client_id: scClientId,
            redirect_uri: "http://example.com/callback.html"
        });

        SC.whenStreamingReady( function() {
            console.log('TOP DOWN');
        });

    };

});

// =============================================
})(jQuery);


compiled to: compiled-js-file.js



HTML file...

<!doctype html>
    <head>
        <title>hi</title>
        <script src='jQuery.js'></script>
        <script src='compiled-js-file.js'></script>
    </head>
    <body>

        <h1>html file</h1>

    </body>
</html>

etc.

I've made a .jshintrc file in the base of the theme...

"globals": { "SC": false }

and done the ol /* globals: SC: true */

But the .jshinrc doesn't seem to do anything and the comment gets me a
'SC' was used before it was defined.


I'm no JavaScript expert... but I know that SC is an object... but that's also stored in a variable.. so - seems like it should work like a normal variable...

What am I doing wrong? or is this just a thing I have to suffer with? The code is all running as intended... : ) ???

4

There are 4 answers

1
erikvold On

It does not look like you're including a soundcloud api js file, that may be the cause of this issue.

8
am05mhz On

it seems something wrong with the initialization of SC in the compiled js so that SC is "late" and initialized after that call. have you tried in another browser? is it the same result?

if it is the same, here is probably a some kind of a hacky solution to your problem:

//create a function so we can arrange a timer on it
function streamingReady(){
    if (type of SC != 'undefined') {
        SC.whenStreamingReady( function() {
            console.log('TOP DOWN');
        });
    } else {
        setTimeout(streamingReady, 200);
    }
}

then in the former place of SC.whenStreamingReady, you call streamingReady();

hope it helps

2
Lionia Vasilev On

SC is defined in window object within soundcloud JavaScript SDK: window.SC=window.SC||{}. There is an old github issue about troubles of identifying this kind of global objects by JSHint since it's typically not executing code but rather analyzing it. Telling JSHint about SC existance must solve issue. Correct syntax is described in JSHint documentation. You should define variable using predef property in .jshintrc file:

{
  "predef": [ "SC" ]
}

Or using inline configuration like this:

/* global SC */


Update: If you are using CodeKit then try to set globals using CodeKit UI. You need to put SC in Project Settings -> Syntax Checkers -> Custom Globals textfield. It looks like CodeKit use custom JSHint configuration, and configuration via .jshintrc in not supported at the moment.

0
Boaz Saragossi On

Had the same error, SC takes time to load, I ended up using this code pattern:

WaitForSoundcloud();

function WaitForSoundcloud() {
    if(typeof SC == "undefined") {
        setTimeout(WaitForSoundcloud, 500);
    } else {

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

        SC.oEmbed(track_url, {}).then(function(oEmbed) {
            console.log('oEmbed response: ', oEmbed);
        });
    }

}