Demo: Audio-Slideshow

Audio Synced Slides

This is a demonstration of Projekktor┬┤s Audioslidehow Plugin. It allows to synchronize an image slideshow to a given audio track. The common purpose is to add any kind of illustrations to interview and report pieces but possibilities are only limited by your imagination.

The image slider as well as the big canvas on the right are optional. In case the canvas is missing the images are displayed within the player instead of a static poster / cover image.

Like it? Grab your copy here.

The Stairs
Music: "Materia" by M-PeX (Marco Miranda), http://soundcloud.com/mpex under http://creativecommons.org/licenses/by-nc-sa/3.0/
Photos: "Treppen" by Ernst Kluger, http://www.ernstkluger.de under http://creativecommons.org/licenses/by-nc-sa/3.0/

The Code

<div class="projekktor-audioslides">
    <div class="ppplayerwrapper">
        
        <!-- THE PLAYER -->
        <div class="projekktor audio ppfancy" id="player2"></div>
        
        <!-- THUMB CONVEYOR -->
        <div class="ppsliderwrapper ppfancy">
            <div class="ppsliderconveyor" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="conveyor"></div>
            <span class="ppsliderprev" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="prev"></span>
            <span class="ppslidernext" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="next"></span>
        </div>
    
    </div>
    
    <div class="ppimagewrapper ppfancy">
        <!-- FULL SIZE IMAGE -->
        <div class="ppsliderimage" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="canvas"></div>
        <div class="ppslidertitle" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="title">The Stairs</div>
    </div>
    
    <div style="clear: both; margin: 10px; text-align: center; width: 100%;">
        Music: "Materia" by M-PeX (Marco Miranda), http://soundcloud.com/mpex under http://creativecommons.org/licenses/by-nc-sa/3.0/<br/>
        Photos: "Treppen" by Ernst Kluger, http://www.ernstkluger.de under http://creativecommons.org/licenses/by-nc-sa/3.0/
    </div>
</div>

<!-- FUN PART -->
<script type="text/javascript">
jQuery(document).ready(function($) {    
    projekktor('#player2' , {
        ratio: 16/9,
        plugin_controlbar: {
            showCuePoints: true
        },
        playlist: [
            {
                1: {src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/audio/01_m-pex_-_materia.mp3', type:'audio/mpeg'},
                2: {src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/audio/01_m-pex_-_materia.ogg', type:'audio/ogg'},
                config: {
                    poster: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/00_m-pex_-_ignis__front_.jpg',
                    plugin_audioslideshow: {
                        images: [
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t1.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t1-big.jpg', on: '00:00:02', title: 'Oh long and dark the stairs I trod,'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t2.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t2-big.jpg', on: '00:00:14', title: 'with stumbling feet to find my God,'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t3.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t3-big.jpg', on: '00:00:34', title: 'Gaining a foothold bit by bit'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t4.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t4-big.jpg', on: '00:01:20', title: 'Then slipping back and losing it.'},       
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t5.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t5-big.jpg', on: '00:01:55', title: 'There came a certain time when I'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t6.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t6-big.jpg', on: '00:02:15', title: 'Loosened my hold and fell thereby,'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t7.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t7-big.jpg', on: '00:02:45', title: 'Down to the lowest step my fall'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t8.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t8-big.jpg', on: '00:03:10', title: 'As if I had not climbed at all.'},     
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t9.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t9-big.jpg', on: '00:03:45', title: 'And as I lay despairing there,'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t10.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t10-big.jpg', on: '00:04:10', title: 'there came a footfall on the stairs'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t11.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t11-big.jpg', on: '00:04:40', title: 'And lo when hope had ceased to be'},
                            {src_pre: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t12.jpg', src: 'http://www.projekktor.com/wp-content/demos/audioslideshow/images/t12-big.jpg', on: '00:04:50', title: 'My God came down the stairs to me.'}    
                        ]
                    }
                }
            }
        ]
    });
});
</script>