What are the options for a browser-agnostic way of doing a web slideshow with audio?

Question

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.

Answer 1

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/

Answer 2

While there is this new bright and shiny audio tag in html5, one really cannot use it until most of the surfers browser support it. This means flash is the only option for the audio part. Although I think using Flash/Actionscript for the whole application may be the easy way you can also use multiple technologies. I can recommend Soundmanger as very convenient javascript library for controlling audio. It works with a tiny flash movie which actually plays the clip, but hides all interfacing behind a nice api (includes a bunch of events, too).

So this may be your audio backend. For controlling the whole scene I would indeed choose jQuery, but thats a matter of taste. The easiest way would be to fetch a JSON file (and either "eval" it or parse with JSON2 Script) which contains all the image and audio URLs (or generate it directly in your js code or something). Feed your Soundmanager instance with the fetched clips, preload some or all of your images and your ready to go.

When it comes to image transition effects, you can do a lot with jQuery/JS/HTML, but you can do MUCH more with Flash, which leads to my initial suggestion to use Flash and ActionScript for the whole project.

Hoping this helps a bit, good luck!

p.s. Here is an example of javascript/audio synchronization. The page tries to mimic a music record (in German unfortunately), wait for a song to finish ;).