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个。当用户按下播放时，您还可以从阵列中动态加载音频 - 这样您就不需要在页面加载时加载任何音频。

我在这里更新了您的小提示，以向您展示它的工作原理：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音频

1 个答案: