Pre-load audio files at the client-side for later use

Question

I'm building an online test which implements audio (mp3) using the native audio player (i.e. non Flash-based).

The test shows one question at a time and loads each subsequent question asynchronously.

Some questions have an accompanying audio file, others don't, and the audio files can be several MB in size.

So what I'm hoping to do is to preload the audio files client-side at the start of the test and then move these into place when the relevant question comes up.

So far I've tried loading an audio file into a QuickTime player, then when that question comes up I use jQuery's clone(true) method to copy this into a part of the page which is displayed. However, when I do this the QuickTime player has to reload the audio file from source. Same is true for Windows Media Player.

Does anyone have any suggestions as to how I can preload the audio client-side and then call it forward when needed?

Answer 1

what you need to do I think is to get your hands on something like jPlayer or soundmanager and then ajax function like this to preload the audio:

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