preload html5 audio in order

Question

I have a list of songs I want to play when the user clicks a button, but it seems that the songs all try to load at the same time so it takes a while for it to load. If I leave the page open for about 5 minutes the music will finally play, but I would like it to not have to wait 5 min. So is there a way to force Song1 to fully load by itself, then have Song2 load by itself, etc.

Jquery:

$(document).ready(function(){
    var x = $(".audio-player").length;
    var z = 0;

    $("#play").click(function(){
        $(".audio-player")[z].play();
    });
    $("#pause").click(function(){
        $(".audio-player")[z].pause();
    });
    $("#skip").click(function(){
        $(".audio-player")[z].pause();
        z++;
        if (z >= x) z = 0;
        $(".audio-player")[z].play();
        $(".audio-player")[z].currentTime = 0;
    });
});

HTML

<p id="play">Play</p>
<p id="pause">Pause</p>
<p id="skip">Next</p>

<audio class="audio-player" src="https://dl.dropboxusercontent.com/u/64455636/tumblr/music/1/Apollo.mp3"></audio>
<audio class="audio-player" src="https://dl.dropboxusercontent.com/u/64455636/tumblr/music/1/Daydreamer.mp3"></audio>
<audio class="audio-player" src="https://dl.dropboxusercontent.com/u/64455636/tumblr/music/1/Delayed%20Friend%20Request.mp3"></audio>

JSfiddle

Answer 1

You just need 1 audio tag, instead of 3. You can also load the audio dynamically from an array when the user presses play - so you don't need to load any audio when the page loads.

I have updated your fiddle here to show you it working: http://jsfiddle.net/g8vduvaf/6/

You can load the audio dynamically, like this:

var audioFiles = ["url","url2","url3"];

var z = 0;
var audioPlayer = $("#audioPlayer")[0];

var playAudio = function(){
   audioPlayer.src = audioFiles[z];
   audioPlayer.load();
   audioPlayer.play();    
}