jQuery: How do you preload sound?

Question

I have a website that plays sound when you click a button.

This is how I do it

function PlaySound(soundfile) {
    $('#soundContainer').html("<embed src='/uploads/sounds/" + soundfile + "' hidden=true autostart=true loop=false>");
}

How do you preload the sound file beforehand?

Thank you.

Answer 1

just thinking in the top of my head, can you make an ajax request for the sound file, but dont show the button until file is 100% loaded.

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

Answer 2

Do this in HTML5 like this:

my_sound = $("<audio>", {src:"filename.mp3",preload:"auto"}).appendTo("body");

Then to play it:

my_sound[0].play();

Answer 3

There are so many better ways to play sound with JavaScript. For my favorite, check out SoundManager. With it, you can simply call soundManager.load to load the sound file preemptively.