The Audio Slideshow plugin generates time-index controlled image slideshows. Hence it allows to illustrate any sort of audio e.g. interviews, dramas and report pieces.

The plugin is very easy to setup, style and integrates seamlessly into existing Projekktor installations.

Get it here.

The plugin comes with one JS file (projekktor.audioslideshow.js) which needs to be included to your page.

The plugin requires additional HTML-Markup which must be present prior player initialization. The plugin is shipped with a file called “projekktor.audioslideshow.html” for further references.

<!-- THE PLAYER -->
<div class="projekktor audio" id="player2" style="width: 576px; height: 250px; margin: 15px;"></div>

<!-- THUMB CONVEYOR -->
<div class="ppsliderwrapper">
    <div class="ppsliderconveyor" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="conveyor"></div>
    <div class="ppsliderprev" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="prev"></div>
    <div class="ppslidernext" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="next"></div>

</div>


<!-- FULL SIZE IMAGE -->
<div class="ppslidertitle" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="title"></div>
<div class="ppsliderimage" data-pp-audioslider-host="player2" data-pp-audioslider-func="canvas"></div>

The CSS classes can be set on your desire. This example uses class-prefixes / namespace (“pp” per default) but this purely optional. Also the “ppsliderwrapper” container is just for some additional styling and not required for the plugin´s functionality.

In the above example containers with assigned “data” are the important ones and all of them are optional.

The following “data-pp-audioslideshow-func” values are interpreted:

• “prev” will become the “jump to previous image” button.
• “next” will become the “jump to next image” button.
• “conveyor” will be filled with the thumbnail slider.
• “canvas” will be used as canvas for the full sized version of active images. If this container is missing images will be displayed within the player´s display area.
• “title” will be filled with the active item´s title as set in the plugin-config.

As you can have multiple audio sliders on one page you need to assign the discussed HTML set to a specific player instance. This is done by using the “data-pp-audioslideshow-host” attribute with which you can assign a player ID. In the given example the slider is tied to a Projekktor instance with the ID “player2”.

The plugin comes with a very basic CSS example (projekktor.audioslideshow.css). Nothing special here.

The Audio Slides extension needs to get installed as a plugin as described here. Basically this will look like this:

var player = projekktor('#player_a', {
   controls: true,
   autoplay: false,
   addplugins: ['controlbar'],
   playlist: [   
      {
         0: {src:'http://www.projekktor.com/video/mc.mp4', type:"video/mp4"}
      }
   ]
});

Images holds an array of objects. Each of those objects requires four properties to be set:

• src_pre - URL to a preview image (thumbnail) to add to the conveyor area.
• src - URL to the full size version of the image as to display in the audio-slide canvas area.
• title - The image´s title.
• on - A string representing the human readable time-index to trigger focusing of the respective image.

plugin_audioslideshow: {
	images: [
        {src_pre: 'images/t1.jpg', src: 'images/t1-big.jpg', on: '00:00:02', title: 'Oh long and dark the stairs I trod,'},
        {src_pre: 'images/t2.jpg', src: 'images/t2-big.jpg', on: '00:00:14', title: 'with stumbling feet to find my God,'},
        {src_pre: 'images/t3.jpg', src: 'images/t3-big.jpg', on: '00:00:34', title: 'Gaining a foothold bit by bit'},
        {src_pre: 'images/t4.jpg', src: 'images/t4-big.jpg', on: '00:01:20', title: 'Then slipping back and losing it.'},       
        {src_pre: 'images/t5.jpg', src: 'images/t5-big.jpg', on: '00:01:55', title: 'There came a certain time when I'},
        {src_pre: 'images/t6.jpg', src: 'images/t6-big.jpg', on: '00:02:15', title: 'Loosened my hold and fell thereby,'},
        {src_pre: 'images/t7.jpg', src: 'images/t7-big.jpg', on: '00:02:45', title: 'Down to the lowest step my fall'},
        {src_pre: 'images/t8.jpg', src: 'images/t8-big.jpg', on: '00:03:10', title: 'As if I had not climbed at all.'},     
        {src_pre: 'images/t9.jpg', src: 'images/t9-big.jpg', on: '00:03:45', title: 'And as I lay despairing there,'},
        {src_pre: 'images/t10.jpg', src: 'images/t10-big.jpg', on: '00:04:10', title: 'there came a footfall on the stairs'},
        {src_pre: 'images/t11.jpg', src: 'images/t11-big.jpg', on: '00:04:40', title: 'And lo when hope had ceased to be'},
        {src_pre: 'images/t12.jpg', src: 'images/t12-big.jpg', on: '00:04:50', title: 'My God came down the stairs to me.'}    
    ]
}

The “controlbar” plugin visualizes cue-points used for the audioslides. To toggle this you can use the “showCuePoints” parameter, e.g.:

plugin_controlbar: {
     showCuePoints: true,
}