Preloading wav/mp3 files in jQuery

Question

I have this code (found from another StackOverflow question:

$(document).ready(function() {
    $.ajax({
        url: "soundfile.mp3",
        success: function() {
            $("#play_button").show();
        }
    });
});

This code works fine, but how can I amend it to handle multiple sound files?

Answer 1

Hmm. I think you have two options here: Either start multiple $.ajax() requests at once by simply copy+pasting the block:

$(document).ready(function() {
  $.ajax({url: "file1.mp3", success: function() {$("#play_button").show();}});
  $.ajax({url: "file2.mp3", success: function() {$("#play_button").show();}});
  $.ajax({url: "file3.mp3", success: function() {$("#play_button").show();}});
  $.ajax({url: "file4.mp3", success: function() {$("#play_button").show();}});   
});

Or run them successively by putting the next $.ajax() request into the success callback of the previous one.

I would tend to run the preloads successively because of the maximum connection limit on both the browser, and the server side. Opening a lot of simultaneous connections could slow down the loading of other important elements like images, JavaScript files and style sheets.