Audio

Sections: HTML5 Audio | Sound Cloud

To control audio, we can use the video options and settings. The isVideoPlaying option should be renamed to isMediaPlaying but then we'd have a lot of backward compatibility issues. Maybe in AnythingSlider v2.0 ;)

HTML5 Audio

Coming soon!

Sound Cloud

I set up a demo here showing you how to control the embedded SoundCloud player. The code uses the slide oninitialized callback to set up being able to get the SoundCloud player status. The onSlideInit and onSlideComplete callbacks will pause or play the audio. When the SoundCloud player is active, it will also pause the slideshow while the audio is playing using the isVideoPlaying callback.

But first, make sure you include the SoundCloud API script

<script src="http://w.soundcloud.com/player/api.js"></script>

Now make sure you are using the SoundCloud iframe embed code. It'll look something like this:

<ul id="slider">
  <li><iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5858290&show_artwork=true"></iframe></li>
</ul>

Now we can initialize AnythingSlider with the initialization and controlling scripts:

$(function() {

    // store soundcloud audio player status
    var scPlaying = [];

    $('#slider').anythingSlider({

        // find all soundcloud iframes and bind to events to update status
        onInitialized: function(e, slider) {
            slider.$items.filter(':not(.cloned)').each(function(i) {
                var widget, aud = $(this).find('iframe[src*="soundcloud"]');
                // false is the playing status
                scPlaying[i] = false;
                if (aud.length) {
                    aud.each(function() {
                        widget = SC.Widget(this);
                        widget.bind(SC.Widget.Events.READY, function() {
                            widget.bind(SC.Widget.Events.PLAY, function() {
                                scPlaying[i] = 'playing';
                            });
                            widget.bind(SC.Widget.Events.PAUSE, function() {
                                scPlaying[i] = 'paused';
                            });
                            widget.bind(SC.Widget.Events.FINISH, function() {
                                scPlaying[i] = 'finished';
                            });
                        });
                    });
                }
            });
        },

        // pause when changing slides
        onSlideInit: function(e, slider) {
            var audio = slider.$currentPage.find('iframe[src*="soundcloud"]');
            if (audio.length) {
                // pause all players when changing slides
                audio.each(function() {
                    SC.Widget(this).pause();
                });
            }
        },
        // Only play a paused video when a slide comes into view
        onSlideComplete: function(slider) {
            var audio = slider.$currentPage.find('iframe[src*="soundcloud"]');
            if (audio.length && scPlaying[slider.currentPage - 1] === 'paused') {
                // using "audio[0]" will only start the first player in the slide
                SC.Widget(audio[0]).play();
            }
        },

        // return true if audio is playing or false if not
        isVideoPlaying: function(slider) {
            // soundcloud playing status
            return scPlaying[slider.currentPage - 1] === 'playing';
        }
    });

});