html - Soundcloud:同时播放多个轨道 - HTML5 小部件

Question

我正在尝试基于 Soundcloud 创建一个简单的多轨播放器，显示多轨并同时开始播放它们。

我在这里找到了一个类似的原型(prototype)(基于 Flash 小部件):http://sessian.com/10/
按下两个不同的“播放”按钮，两个轨道可以一起播放。

使用 HTML5 小部件似乎是不可能的，一次只能播放一首轨道。快速示例: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 初始化选项，或者有两个不同的 SC 实例的方法，或者......)

谢谢!

Answer 1

澄清一下:API for the flash and HTML5 widgets正是针对此用例支持 single_active 参数。