jQuery - Audio.play() and layering sounds

Question

I have a script which, among other other things, uses Audio.play() to play a sound.

Here's a snippet - FYI there are about twelve "give" divs I am loading in total:

$("#give1").delay( 20000 ).fadeIn(1000,function(){
var sample = new Audio("sound.ogg");
sample.play();
  $(this).delay( 8000 ).animate({top: '+=300px'}, 1000);
});

$("#give2").delay( 110000  ).fadeIn(1000,function(){
var sample = new Audio("sound.ogg");
sample.play();
$(this).delay( 8000 ).animate({left: '+=400px', top: '-=0px'}, 1000);
});

$("#give3").delay( 50000 ).fadeIn(1000,function(){
var sample = new Audio("sound.ogg");
sample.play();
$(this).delay( 8000 ).animate({left: '-=400px', top: '-=0px'}, 1000);
});
...and so on.

However, when the next sample.play begins (ie after "#give2" is faded in) the previous sound ends and the new sound begins.

What I want is for the sounds to layer - the previous sound should continue playing while the new sound starts. This will create an effect where, after many instances, you'll be hearing several sounds playing on top of each-other, like a cacophony of sound.

Is there a problem with my formatting, or does 'sample.play' only allow for one sound playing through the browser at any given time? Is there a way to achieve this effect - maybe with a different function?

edit: One potential solution I've thought of would be to load a single .ogg file at the beginning that syncs with the script and "layers" on its own; I could use Audacity or something to loop and layer the sound, and match up the timing with the delays I've specified. It is possible that the sound could become off-sync though (ie slow download of the .ogg file when it's called).

Answer 1

I'm going to mark this as resolved - it appears that the sample is layering as expected. I'm leaving my potential solution intact to help anyone else that comes across this question.