複数のトラックを表示して同時に再生を開始する、Soundcloud に基づいた単純なマルチトラック プレーヤーを作成しようとしています。
ここで同様のプロトタイプを見つけました (Flash ウィジェット ベース): http://sessian.com/10/
2 つの異なる [再生] ボタンを押すと、2 つのトラックを一緒に再生できます。
代わりに HTML5 ウィジェットを使用すると、これは不可能なようです。一度に再生できるトラックは 1 つだけです。ここでの簡単な例: 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...');
});
}());
「再生」を押すと、一時停止イベントが他のウィンドウに渡されます。これは、さまざまなブラウザー タブにも当てはまります。
HTML5 ウィジェットを使用して複数の同時再生を許可する方法はありますか? (既存の SC 初期化オプション、または 2 つの異なる SC インスタンスを持つ方法、または ...)
ありがとうございました!