HTML5 SoundCloud Widget - How do I handle errors, especially 404 & ldquo; sound not found & rdquo;

advertisements

I am integrating SoundCloud into my site and using the HTML5 player widget.

My site creates playlists and auto advances.

I am running into the following problem in testing.

Some sounds rather than playing result in the HTML5 widget displaying the message, "404 Error: Ooops this sound could not be found"

I also use the YouTube API and they have an onError event that makes it easy to handle errors and in my particular case skip to the next track in a playlist.

I have scoured the documentation and StackOverflow and I am surprised to see there is no mention of how to handle this common use-case for SoundCloud.

I do use event binding on the SC HTML5 widget but there is no mention of an error event??

So the question is specifically how can I trap the 404 and then execute custom code?

Thanks very much for an awesome API!


I had this same problem and came up with a workaround for it. I initialize the widget inside a function and do setTimeout() at the beginning of the function and clearTimeout() on the play or error events, that way if the track plays or throws an error I can handle it with the event listeners and if it doesn't I can handle it with the function inside setTimeout().

function createSoundcloudWidget() {
    var soundcloudTimeout = setTimeout(function() {
        onError();//the function to call when you get an error that doesn't throw an event
    }, 3000)
    var iframe = document.querySelector('#SCwidget');
    WIDGET = SC.Widget(iframe);

    WIDGET.bind(SC.Widget.Events.ERROR, function(eventData) {
        clearTimeout(soundcloudTimeout); //clears timeout
    }
    WIDGET.bind(SC.Widget.Events.READY, function(eventData) {
        clearTimeout(soundcloudTimeout); //clears timeout
    });
}

It's not perfect but it will enable you to perform a function on any tracks that don't render a widget.