我希望多个 SoundCloud 小部件在同一页面上同时播放

Question

我的页面上隐藏了两个 soundcloud 小部件。我已将它们链接到充当播放按钮的 divs。当前，当单击第一个 div 时，第一个声音开始。当点击第二个div时，第二个声音开始，第一个声音自动暂停。我想让声音同时播放。

<div id = "bgSound">
  <iframe id = 'first' width="0" height="0" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/257485031?secret_token=s-i9opu&color=ff5500&inverse=false&auto_play=false&show_user=true"></iframe>

  <iframe id = "second" width="0" height="0" scrolling="no" frameborder="no" src="https://api.soundcloud.com/tracks/257498359?secret_token=s-c9D5D&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>

var widget1 = SC.Widget('first'); 
var widget2 = SC.Widget('second')
$('.Top-Left').click(function() {
    widget1.play();
});
$('.Top-Center').click(function() {
    widget2.play();
});

Answer 1

你应该可以使用single_active=false来确保两者可以同时播放，否则一个会在开始播放时暂停另一个。

<div id = "bgSound">
  <iframe id="first" width="0" height="0" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/257485031?secret_token=s-i9opu&color=ff5500&inverse=false&auto_play=false&show_user=true&single_active=false"></iframe>

  <iframe id="second" width="0" height="0" scrolling="no" frameborder="no" src="https://api.soundcloud.com/tracks/257498359?secret_token=s-c9D5D&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true&single_active=false"></iframe>
</div>

var widget1 = SC.Widget('first'); 
var widget2 = SC.Widget('second')
$('.Top-Left').click(function() {
    widget1.play();
});
$('.Top-Center').click(function() {
    widget2.play();
});

SoundCloud Widget Parameter Documentation

我希望多个 SoundCloud 小部件在同一页面上同时播放

I want multiple SoundCloud widgets to play simultaneously on the same page

html

javascript

css

jquery

soundcloud