CODEWITHSUNDEEP
javascriptsoundcloud
Devz
Devz

Reputation: 603

Error in the Soundcloud API: Cannot read property 'substr' of null

I'm trying to code a Widget using Soundcloud API (locally).

Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Soundcloud musics</title>
</head>
<body>
<h1>Soundcloud musics</h1>
<iframe id="iframe"
    class="iframe"
    width="100%"
    height="465"
    scrolling="no"
    frameborder="no">
</iframe>
<script src="api.js"></script>
<script>
    var player;
    player = SC.Widget(document.getElementById('iframe'));
    console.debug(player);
    player.load('https://soundcloud.com/somesong', null);
</script>
</body>
</html>

The error i got from running this is :

Uncaught TypeError: Cannot read property 'substr' of null
E @ api.js:204
d @ api.js:328
n.exports.v @ api.js:326
(anonymous function) @ index.html:21

I've entered soundcloud's minimized api code into a js beautifier so i can track the error. Here's the code : https://jsfiddle.net/0anL7jfs/

Am i doing something wrong ? It seems that the problem is coming from the SC.Widget() function...

Upvotes: 3

Views: 1165

Answers (1)

l&#39;L&#39;l
l&#39;L&#39;l

Reputation: 47264

You'll need to change a couple of things:

Define src within your iframe with the player widget api url and properties:

<iframe id="iframe"
     class="iframe"
     width="100%"
     height="465"
     scrolling="no"
     frameborder="no"
     src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/76067623&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true">
</iframe>

Bind your events with widget.bind:

<script type="text/javascript">
(function(){
    var iframeElement = document.getElementById('iframe');
    var widget = SC.Widget(iframeElement);
    widget.bind(SC.Widget.Events.READY, function () {
        console.log('Ready');
        widget.bind(SC.Widget.Events.PLAY, function () {
            widget.getCurrentSound(function (sound) {
                console.log(sound.title);
            });
        });
           widget.bind(SC.Widget.Events.FINISH, function () {
               console.log('Finished');
        });
    });
}());
</script>

Example:

http://jsfiddle.net/dqz1jmzo/ ( JQuery Version )

Upvotes: 3

Related Questions