Soundcloud: play multiple tracks simultaneously - HTML5 widget

Question

I am trying to create a simple multi-track player based on Soundcloud, displaying multiple tracks and start playing them simultaneously.

I found a similar prototype here (Flash widget based): http://sessian.com/10/
Pressing two different 'Play' buttons, the two tracks can be played together.

It seems that using the HTML5 widgets instead this is not possible, only one track can be played at a time. Quick example here: http://jsfiddle.net/ftwJr/7/

Html:

<iframe id="widget" src='http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/43315398&auto_play=true' width="100%"></iframe>
<iframe id="widget2" width="100%" src='http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/4331538'></iframe>

JavaScript:

(function() {
    var iframe = document.querySelector('#widget');
    var widget = SC.Widget(iframe);
    widget.bind(SC.Widget.Events.PLAY, function(eventData) {
        alert('Playing 1...');
    });
    widget.bind(SC.Widget.Events.PAUSE, function(eventData) {
        alert('PAUSE 1...');
    });

    var iframe2 = document.querySelector('#widget2');
    var widget2 = SC.Widget(iframe2);
    widget2.bind(SC.Widget.Events.PLAY, function(eventData) {
        alert('Playing 2...');
    });
    widget2.bind(SC.Widget.Events.PAUSE, function(eventData) {
        alert('PAUSE 2...');
    });
}());

Pressing 'Play' will pass a pause event to the other window. This is true also in different browser tabs.

Is there a way to allow multiple simultaneous playing using the HTML5 widget? (An existing SC init option, or a way to have two different SC instances, or ...)

Thank you!

Currently this isn't supported in the HTML5 widget, but it is on our roadmap to be added soon. — nickf, Sep 14 '12 at 09:36
Had the same problem. Have avoid the widget and written code using native HTML5 audio element. Have audio displayed, draggable, starts simultaneously (using a timeout). Works for local audio data, but can't access SoundCloud track.download_url yet. I see a question on this matter posted here, and when it's answered, I hope to publish my code, maybe it will help until the SC widgets are updated. — Lee Goddard, Sep 14 '12 at 10:30
@LeeGee: initially I created a simple prototype without GUI, and successfully played multiple SC tracks simultaneously using the `SC.stream` functionality. It returns a soundManager2 sound object you can play with. `SC.get('/resolve', { url: }, function(track) { = SC.stream("/tracks/" + track.id, {autoLoad: true}); });` — FraDiGomma, Sep 14 '12 at 14:56

score 3 · Accepted Answer · edited Apr 02 '13 at 23:13

3

To clarify: the API for the flash and HTML5 widgets supports a single_active parameter for exactly this use case.

edited Apr 02 '13 at 23:13

0joshuaolson1

55
9

answered Sep 14 '12 at 12:30

pje

21,801
10
54
70

Soundcloud: play multiple tracks simultaneously - HTML5 widget

1 Answers1