按顺序预加载html5音频

Question

我有一个歌曲列表，当用户单击一个按钮时，我想要播放的歌曲，但似乎所有的歌曲都试图同时加载，所以它需要一段时间才能加载。如果我把页面打开大约5分钟，音乐最终就会播放，但我希望它不用等待5分钟。因此，是否有一种方法可以强制Song1自己完全加载，然后让Song2自己加载，等等。

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;
    });
});

<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

你只需要一个音频标签，而不是3个。当用户按下play键时，您也可以动态地从一个数组加载音频--所以在页面加载时不需要加载任何音频。

我在这里更新了你的小提琴，让你知道它的作用：http://jsfiddle.net/g8vduvaf/6/

您可以动态加载音频，如下所示：

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

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

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