Loading SoundCloud in Buzz.js

Example code showing how to load SoundCloud tracks into Buzz audio objects. Press 'a' to print status messages and 'z', 'x', or 'c' to play, pause, or stop.

by stupid_genius

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.0/buzz.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
Click in the box, then:<br />
Z: play<br />
X: pause<br />
C: stop<br />
<canvas id="canvas"></canvas>

JavaScript

var mySound = {
    track_url: "https://soundcloud.com/user394531532/fear-intro",
    //track_url: "https://soundcloud.com/vaffunkool/hypnotoad-sound",
    client_id: '201b55a1a16e7c0a122d112590b32e4a',
    track: null
};

function processor(pjs){
    var canvasWidth = 400;
    var canvasHeight = 400;
    pjs.setup = function(){
        pjs.size(canvasWidth, canvasHeight);
        SC.initialize({client_id:mySound.client_id});
        SC.get('/resolve', { url: mySound.track_url }, function(res, err) {
            mySound.track = new buzz.sound(res.stream_url+'?client_id='+mySound.client_id);
            mySound.track.bindOnce('canplay', function(e){
                mySound.track.loop().play();
                console.log('ready');
            });
        });
        pjs.noLoop();
    };
    pjs.draw = function(){
    };
    pjs.keyPressed = function(){
        switch(pjs.key.code){
            case 122:
                mySound.track.play();
                break;
            case 120:
                mySound.track.pause();
                break;
            case 99:
                mySound.track.stop();
                break;
            case 97:
                console.log(mySound.track.getNetworkStateMessage());
                console.log(mySound.track.getStateMessage());
                break;
        };
        switch(pjs.keyCode){
            case pjs.UP:
                pjs.redraw();
                break;
            case pjs.DOWN:
                pjs.noLoop();
                break;
            case pjs.LEFT:
            case pjs.RIGHT:
                pjs.loop();
                break;
        }
    };
}

var canvas = document.getElementById("canvas");
var p = new Processing(canvas, processor);