JQuery stops sound cloud embedding modals

Stops the sound cloud when closing the modal. Is there a HTML or JQuery solution? I tried this. However, I can't seem to get it to function. Is there something I am looking at with my code? it seems like the variables messed up the code, but I don't know why ...

Code:

<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);
    });

});

      

+3


source to share


2 answers


The SoundCloud open API can be used to control the player.

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.
})

      



Here is a demo http://jsfiddle.net/dhirajbodicherla/h3WDq/540/

+3


source


I finally got this to work. I had to change the IFRAMEELEMENT variables that I was able to call the function. Many thanks for the help!



<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();
        });

      

0


source







All Articles