jquery soundcloud play/stop

Question

How can I add the CSS-Class "playSound", during the track plays?

jQuery(document).ready(function($)
    {
        var widget = SC.Widget(document.getElementById('soundcloud_widget'));

        /*widget.bind(SC.Widget.Events.READY, function()
        {
            //console.log('Ready...');
            jQuery(".checkSound").removeClass('stopSound').addClass('playSound');
        });*/

        jQuery('.playSound').click(function()
        {
            widget.toggle();
            jQuery(".playSound").addClass('stopSound');
        });

        jQuery('.stopSound').live(function()
        //jQuery(".stopSound").live("click", function()
        //jQuery('.stopSound').click(function()
        {
            jQuery(".stopSound").addClass('playSound').removeClass('stopSound');
        });
    });

Can you provide more background or explanation of your code? — Keith Pinson

Jason Whitted Jason Whitted · Accepted Answer · 2012-12-28T23:04:52

I have never used SoundCloud, but it appears that you are trying to use the same element to both play and stop. If that is the case, this should work:

jQuery(".playSound,.stopSound").click(function(){
    jQuery(this).toggleClass("playSound stopSound");
    widget.toggle();
});

The click event will presumably be bound to a single element. The selector .playSound,.stopSound is to make sure it selects the element regardless of what class it starts out with. .toggleClass() will remove class if they are in the list or add classes if they are not. And I'm assuming widget.toggle() was working as expected.

jquery soundcloud play/stop

1 Answers