I have a requirement to put together an application which will generate a web slide show.
It needs to be able to do fancy transitions between multiple images (in a browser) and also provide audio while those images are being displayed. The transitions between images must be delayed until the audio is finished (each image will have its own audio track).
It also needs to be created with a program so no fancy GUI designer tools – I want to be able to just generate XML or plain text files which can either be loaded directly into a browser (a la jQuery) or compiled with a freely distributable tool (a la Open Laszlo).
All my web work to date has been J2EE but I think it’s time I checked out some of the richer client-side tools. I’ve had a quick look into both Open Laszlo and jQuery but I’m not sure how I would go about syncing the slides with the audio. The basic process will be:
- kick off audio track.
- transition to image.
- wait until audio track is finished.
- rinse and repeat.
Is this sort of thing possible with jQuery? There seems to be a huge amount of DOM-manipulation stuff but I can’t find anything obvious about the audio synchronization.
I’m open to other suggestions if you have them but the requirement for freely distributable tools is an absolute. This will probably rule out the majority of the Adobe Flash type solutions.
I recommend jPlayer http://www.happyworm.com/jquery/jplayer/ as your Audio event handler. jPlayer is great because it also supports HTML5 audio.
You can then use the onSoundComplete callback function within jPlayer to trigger an image change. There are too many image scroller/slideshow jQuery to list, but personally I like Cycle: http://malsup.com/jquery/cycle/