jQuery停止声音云嵌入模态

Question

关闭模态时停止声音云。是否有 HTML 或 JQuery 解决方案？我试过这个。但是我无法让它发挥作用。我的代码是否忽略了某些内容？似乎变量弄乱了代码，但我不知道为什么......

代码：

<div class = "modal fade" id = "seeyou" role= "dialoge">
  <div class = "modal-dialog">
    <div class = "modal-content">
      <div class= "modal-header">
          <h4>GUEST LIST</h4>
            <div id = "video">
                 <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/199607357&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
             </div>
            <div class = "modal-footer">
              <a class = "btn btn-default" data-dismiss = "modal">CLOSE</a>
            </div>
        </div>
      </div>
    </div>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="https://w.soundcloud.com/player/api.js"></script>
    <script src="copy.js"></script>
  </body>
</html>
$(document).ready(function() {
    $('.box-toggle3').hide();
    $('.box-toggle1').hide();
    $('.box-toggle2').hide();

    var iframeElement   = $('#video > iframe')[0];
    var scPlayer = SC.Widget('iframeElement');
    $('#seeyou').on('hidden.bs.modal', function () {
    scPlayer.pause();
            });

    $('#new-releases').click(function() {
        $('#box').removeClass('box-reg');
        $('#box').addClass('box-zoom');
        $('.box-toggle1').fadeOut(200);
        $('.box-toggle3').fadeOut(250);
        $('.box-toggle2').fadeOut(250);
        $('.box-toggle').fadeOut(250);
        $('.box-toggle1').fadeIn(2500);
    });

    $('#concerts').click(function() {
        $('.box-toggle3').fadeOut(250);
        $('.box-toggle2').fadeOut(250);
        $('.box-toggle1').fadeOut(200);
        $('.box-toggle').fadeOut(250);
        $('#box').removeClass('box-zoom');
        $('#box').addClass('box-reg');
        $('.box-toggle2').fadeIn(2500);
    });

    $('#playlists').click(function() {
        $('.box-toggle3').fadeOut(250);
        $('.box-toggle2').fadeOut(250);
        $('.box-toggle1').fadeOut(200);
        $('.box-toggle').fadeOut(250);
        $('#box').removeClass('box-zoom');
        $('#box').addClass('box-reg');
        $('.box-toggle3').fadeIn(2500);
    });

    $('#news').click(function() {
        $('.box-toggle').fadeOut(250);
        $('.box-toggle3').fadeOut(250);
        $('.box-toggle2').fadeOut(250);
        $('.box-toggle1').fadeOut(200);
        $('#box').removeClass('box-zoom');
        $('#box').addClass('box-reg');
        $('.box-toggle').fadeIn(2500);
    });

    $('#news2').click(function() {
        $('.box-toggle3').fadeOut(250);
        $('.box-toggle2').fadeOut(250);
        $('.box-toggle1').fadeOut(200);
        $('.box-toggle').fadeOut(250);
        $('#box').removeClass('box-zoom');
        $('#box').addClass('box-reg');
        $('.box-toggle2').fadeIn(1500);
    });

    $('#news3').click(function() {
        $('#box').removeClass('box-reg');
        $('#box').addClass('box-zoom');
        $('.box-toggle1').fadeOut(200);
        $('.box-toggle3').fadeOut(250);
        $('.box-toggle2').fadeOut(250);
        $('.box-toggle').fadeOut(250);
        $('.box-toggle1').fadeIn(1500);
    });

});

Answer 1

SoundCloud's public API可用于控制播放器。

var iframeElement   = $('#video > iframe')[0]; // catches the iframe element
var scPlayer         = SC.Widget(iframeElement); // wraps with SoundClouds api

$('#myModal1').on('hidden.bs.modal', function () {
    scPlayer.pause(); // pause the player when the modal window is closed.
})

这是一个演示http://jsfiddle.net/dhirajbodicherla/h3WDq/540/

Answer 2

我终于让它工作了。我必须更改 IFRAMEELEMENT 的变量才能调用该函数。非常感谢您的帮助！

<div class = "modal fade" id = "seeyou" role= "dialoge">
  <div class = "modal-dialog">
    <div class = "modal-content">
      <div class= "modal-header">
          <h4>GUEST LIST</h4>
            <div id = "video">
                 <iframe id = "sc-widget" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/199607357&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
             </div>
            <div class = "modal-footer">
              <a id = "stopSound" class = "btn btn-default" data-dismiss = "modal">CLOSE</a>
            </div>
        </div>
      </div>
    </div>
  </div>    
var widget1 = SC.Widget("sc-widget");
             $("#stopSound").click(function() {
            widget1.pause()
        });
             $('#seeyou').on('hidden.bs.modal', function () {
        widget1.pause();
        });