Preload mp3's

[Trishah]

You guys really seem to know your stuff and I always find your site very helpful when I'm creating websites, so I'm hoping you can help me with this problem...

Background:

I am an html person not a programmer. I have a site in development that has a custom javascript/jquery slide show that uses jPlayer to play a mp3 with each slide.

The Problem:

The mp3's are not preloading and it's causing a delay that screws up the timing of the slide show. So what I need is some sort of a mp3 preloader or "streamer". jPlayer has a preloader but the audio is being called from the custom slide show script and not the player code. Here is the critical pieces of the slide show script. Can you help me figure out the preloading? I would be happy to give a donation to the cause for help.

var photos = [ {
		"title" : "1 of 2",             // title of slide
		"image" : "slide1.jpg",      // background image for slide
                 "audio": "slide1.mp3",     // audio file to play with slide
		"url" : "buy.html",           //  link url for secondline text
                "transitionTime":8,         //  how long to keep slide on screen
		"firstline" : "Text1",        //  text to display over slide (css black)
		"secondline" : "Text2"     //  text to display over slide (css red)
	}, {
		"title" : "2 of 2",
		"image" : "slide2.jpg",
                 "audio": "slide2.mp3",
		"url" : "buy.html",
                "transitionTime":8,
		"firstline" : "Text3",
		"secondline" : "Text4"
	}
];



var stopped = false;
function preloadMedia(photosObject)  {
  var audios = '';
  for(var i=0 in photosObject) {
    audios += "<img src='mp3/"+photosObject[i].media+"' >";
  }
  $("body").append($("<div>").html(audios));
}

[Trishah]

Just bumping this to see if there is anyone who has a solution for me.

[jscheuer1]

The only method I'm aware of to sync up images and audio is video. The most cross browser/cross platform way to do that is via Flash. From what I understand to be your objectives here, it need not be a very sophisticated video. It just needs to show images at various or the same interval(s) in sync to the tune.

I'm not sure but think there are some free apps out there to allow you to do just that with a series of images and an mp3. Certainly there are some not free ones. The result would be either an flv or swf. If swf, it can be placed directly onto the web page using an object tag. If flv, there are free swf files around for playing those.

If done right, the video will stream - so no need for preload, better than preload actually.

kizoa.com - looks promising. I've never tried it though, so this is not an endorsement.

Use Google to find other methods.

[Beverleyh]

Yes, I think a muxed video would be the safest bet too.

You can get good results simply by using Windows Movie Maker to create a timed slideshow with audio (*duck* - expecting a hail of rotten veg) and then convert to Flash using a free tool like this: http://www.dvdvideosoft.com/products...-Converter.htm (it also outputs the code to embed the resulting video in a web page)

Similarly, you could probably find a decent free DVD authoring tool that supports slideshows here: http://www.videohelp.com/tools?order...rt=&s=&hits=50 - Even if the output is a compiled DVD, you should still be able to pull out the final .vob (video) file and convert it to Flash using the tool mentioned above.