Popcorn Slideshow Controller

by TheFiddler

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<div id="ui-clipping"><audio id="slider" controls src="http://www.lunerouge.org/sons/animaux/LRBark%201%20by%20Lionel%20Allorge.ogg">
    </audio></div>


<div id="a" class="box"></div>
<div id="b" class="box"></div>
<div id="c" class="box"></div>

CSS

#slider {
/* margin-left: -32px;*/
}

#ui-clipping {
/*width:175px;
overflow:hidden;*/
}



.box {
width:100px;
height:100px;
display:none;
}

#a {
background: red;    
}

#b {
background: green;    
}

#c {
background: blue;    
}

JavaScript

var $slider = Popcorn("#slider"), 
    $boxes = $(".box");

// Set the volume to 0, if an attempt to change the volume is made, 
// force the volume back to zero
$slider.volume( 0 ).listen( "volumechange", function() {

    this.volume( 0 );

}).listen( "canplayall", function() {
// When the audio is loaded and rady to be played...
    
    var duration = $slider.duration(), 
        elapse = duration / $boxes.length;
    
    // Iterate of over each box element to setup low/high ranges for show/hide
    $boxes.each(function( i ) {
       
        var $box = $(this), 
            boundary = {
                low: Math.round( i * elapse ), 
                high: Math.round( (i + 1) * elapse )
            };
        
        $slider.listen( "timeupdate", function() {
            var thisTime = this.currentTime();

            if ( thisTime >= boundary.low && thisTime <= boundary.high ) {
                $box.show();
            } else {
                $box.hide();    
            }
        });
    });
});