Play multiple audio files in a slider

Question

I'm trying to use this slider: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/ but want to play a different audio file, each time the slide loads.

The way I imagine it working, is for the user to click play on the first slide, the audio to finish playing, then for the slide to change and it automatically plays the next audio file and so it continues until all slides are played through.

I've gotten it to the point where the slider changes when the audio has stopped, but cannot figure out how to play the next audio file, one after the other.

I'm very new to jQuery and am struggling a lot. Any help would really be appreciated!

Here is my work in progress: http://dailycrow.me/actualsite/

Thank you.

Answer 1

What I would do is to handle the audio playing with an scripting language such as PHP and call the needed method with parameters with Javascript or JQuery.

You can embed HTML with PHP so the audio can be played. Something like this:

$audioFile = "wishedAudioFile.mp3";
echo '<embed src="'.$audioFile.'" hudden="true" autostart="true"></embed>';

Answer 2

you can maintain an array of sources, where each index refers to a slide index, and from looking at this doc, you can use the onAfterChange event, code would be something like:

var audio = new Audio(), audSrcList = [
    'slide1.wav',
    'slide2.wav',
    'slide3.wav',
    'slide4.wav'
    ...
    ];

function afterSlideChange(slide, index){
    audio.src = audSrcList[index];
    audio.play();
};
...
$.Slitslider.defaults   = {

    ...

    // callbacks
    onBeforeChange : function( slide, idx ) { return false; },
    onAfterChange : afterSlideChange      //CHANGED here
};