SoundCloud + WebAudio

by soulwire

HTML

<script src="http://connect.soundcloud.com/sdk.js"></script>
<div id="output"></div>
<button id="next">Next Track</button>
<button id="toggle">Play</button>

JavaScript

var tracks = [];

SC.initialize({ client_id: 'b1495e39071bd7081a74093816f77ddb' });
SC.get('/tracks', { q: 'dance' }, function( result ) {
    tracks = result;
    switchSource();
});
console.log( 'SoundCloud SDK', SC );

var frequencyData = new Uint8Array( 64 );
var toggleButton = document.getElementById( 'toggle' );
var nextButton = document.getElementById( 'next' );
var output = document.getElementById( 'output' );

var context = new webkitAudioContext();
var element;
var source;

var analyser = context.createAnalyser();
analyser.connect( context.destination );
analyser.fftSize = 32;

// source must be created on canplay
function onCanPlay() {
    source = context.createMediaElementSource( element );
    source.connect( analyser );
}

function switchSource() {;
    
    var index = ~~( Math.random() * tracks.length );
    var track = tracks.splice( index, 1 )[0];
    console.log( track );
                         
    if ( element ) {

        element.pause();
        element.src = '';

        if ( element.parentElement ) {
            element.parentElement.removeChild( element );
        }
    }
                         
    if ( source ) {
        source.disconnect();
    }
                         
    element = new Audio();
    element.autoplay = true;
    element.controls = true;
    element.src = track.stream_url + '?client_id=YOUR_CLIENT_ID';
    element.addEventListener( 'canplay', onCanPlay );
    document.body.appendChild( element );

    /* Stream using the SC SDK
    SC.stream( "/tracks/" + track.id, {
        autoPlay: true,
        preferFlash: false,
        ontimedcomments: function( comments ){
            console.log( comments, comments[0].body );
        }
    }, function( sound ) {
        console.log( 'sound', sound );
        // callback -> sound.play()
    });
    */
}

function update() {
    
    requestAnimationFrame( update );
    analyser.getByteFrequencyData( frequencyData );
    
    var total = 0;
    for (var i = 0; i <...