按顺序预加载 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;
    });
});

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

您只需要 1 个音频标签，而不是 3 个。您还可以在用户按下播放时从数组中动态加载音频 - 这样您就不需要在页面加载时加载任何音频。

我已经在此处更新了您的 fiddle 以向您展示它的工作原理：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();    
}

按顺序预加载 html5 音频

preload html5 audio in order

jquery

html5-audio