8

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

我在这里找到了一个类似的原型（基于 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 实例的方法，或...）

谢谢！

4

1 回答 1

3

澄清一下：flash 和 HTML5 小部件的 API支持single_active这个用例的参数。

于 2012-09-14T12:30:57.367 回答