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!
To clarify: the API for the flash and HTML5 widgets supports a single_active
parameter for exactly this use case.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With