SoundCloud JavaScript API v. 3 SC.stream Errors

Question

I'm upgrading my code from the Soundcloud Javascript API v. 1 to the latest one. I've been able to migrate 90% of the code, but I have strange behaviors when trying to stream some track. I think I implemented all the required listeners to the "player" object, but I'm unable to understand where the problem is. Here is a snippet of my code:

                    try {
                        SC.stream( "/tracks/" + playlist[ now_playing ].sndc_id ).then(
                            function (player) {
                                sound_object = player;
                                sound_object.on(
                                    'state-change',
                                    function() {
                                        console.log('state-change', this.controller._state);
                                    }
                                ).on(
                                    'play',
                                    function() {
                                        console.log('play');
                                    }
                                ).on(
                                    'play-start',
                                    function() {
                                        console.log('playback started');
                                        playing = true;
                                        show();
                                        play();
                                        updateInfo();
                                    }
                                ).on(
                                    'buffering_start',
                                    function() {
                                        console.log('buffering starts');
                                    }
                                ).on(
                                    'buffering_end',
                                    function() {
                                        console.log('buffering ends');
                                    }
                                ).on(
                                    'time',
                                    function() {
                                        console.log( this.currentTime() );
                                        updateProgress(this.currentTime(), playlist[ now_playing ].duration);
                                    }
                                ).on(
                                    'finish',
                                    function() {
                                        console.log('finish');
                                        loadNext();
                                    }
                                ).on(
                                    'pause',
                                    function() {
                                        console.log('pause');
                                    }
                                ).on(
                                    'play-resume',
                                    function() {
                                        console.log('play-resume');
                                    }
                                ).on(
                                    'geo_blocked',
                                    function() {
                                        console.log('geo_blocked');
                                        loadNext();
                                    }
                                ).on(
                                    'audio_error',
                                    function() {
                                        console.log('audio_error');
                                        sendErrorReport(playlist[ now_playing ].id);
                                        loadNext();
                                    }
                                ).on(
                                    'no_streams',
                                    function() {
                                        console.log('no_streams');
                                        sendErrorReport(playlist[ now_playing ].id);
                                        loadNext();
                                    }
                                ).on(
                                    'no_protocol',
                                    function() {
                                        console.log('no_protocol');
                                        loadNext();
                                    }
                                ).on(
                                    'no_connection',
                                    function() {
                                        console.log('no_connection');
                                        loadNext();
                                    }
                                );

                                sound_object.play();
                            },
                            function( e ) {
                                console.log( e );
                                loadNext();
                            }
                        );
                    } catch(e) {
                        console.log( e );
                        loadNext();
                    }

The playlist array contains a list of valid track ids. What I do is:

• start the streaming
• once it starts playing show the informations about the current track
• while playing, update the progress bar

The first thing that I noticed is that this new API are way slower than the previous ones; the second strange thing is that events are not fired in the order I would expect:

1. play
2. buffer-start
3. play-start
4. buffer-end
5. finish

Sometimes the play-start is fired before the buffer-start and when this happens the client freezes.

The second problem is a Javascript error I got from the SoundCloud JS file from time to time, and that it's not catched by the try {} catch {} expression, here is a snapshot of my JS console:

    play (index):692
    (5x) state-change initialize (index):711
    (8x) buffering starts
    (3x) sdk-3.0.0.js:12
        Uncaught Error: Error: An invalid exception was thrown.
            i.setVolume @ sdk-3.0.0.js:12
            i.createAudioPlayer @ sdk-3.0.0.js:8
            o @ sdk-3.0.0.js:13
            (anonymous function) @ sdk-3.0.0.js:13
            (anonymous function) @ sdk-3.0.0.js:18
            p @ sdk-3.0.0.js:13
            d.fireWith @ sdk-3.0.0.js:13
            d.fire @ sdk-3.0.0.js:13
            (anonymous function) @ sdk-3.0.0.js:13
            (anonymous function) @ sdk-3.0.0.js:18
            p @ sdk-3.0.0.js:13
            d.fireWith @ sdk-3.0.0.js:13
            d.fire @ sdk-3.0.0.js:13
            u.onreadystatechange @ sdk-3.0.0.js:13

Being the SDK file minified it's really hard for me to find where the problem is.

I was wondering if someone already faced these problems, and if a solution exists. What I notice is that the error events are never called, even when the track actually returns an error (like when in the consolle you see a 404 error for the track), this also looks curious to me.

Thank you in advance, S.

Answer 1

I tried my hand at the exact same thing for quite a while. The player just wasn't cutting it and I couldn't get it to work. I looked at Soundnode was doing this because they were able to stream every song and it was with the <audio> tag. Settings its src attribute with autoplay will do the trick. Set up the bindings for the elements events and you're good to go.

Answer 2

you can force it using http protocol by setting player options property like so: player.options.protocols = ['http'];