预加载多个音频文件

Question

我的网页上有一个音频控件.我希望用它来播放多个非常短的音频文件,具体取决于页面的状态.我不想在播放文件时加载文件.如何在页面加载时加载所有这些文件？

这是我正在做的一个粗略的想法:

http://jsfiddle.net/L0c9ccx9/20/

audio.src = ...;
audio.load();
audio.play();

Answer 1

var audioFiles = [
    "http://www.teanglann.ie/CanC/nua.mp3",
    "http://www.teanglann.ie/CanC/ag.mp3",
    "http://www.teanglann.ie/CanC/dul.mp3",
    "http://www.teanglann.ie/CanC/freisin.mp3"
];
    
function preloadAudio(url) {
    var audio = new Audio();
    // once this file loads, it will call loadedAudio()
    // the file will be kept by the browser as cache
    audio.addEventListener('canplaythrough', loadedAudio, false);
    audio.src = url;
}
    
var loaded = 0;
function loadedAudio() {
    // this will be called every time an audio file is loaded
    // we keep track of the loaded files vs the requested files
    loaded++;
    if (loaded == audioFiles.length){
    	// all have loaded
    	init();
    }
}
    
var player = document.getElementById('player');
function play(index) {
    player.src = audioFiles[index];
    player.play();
}
    
function init() {
    // do your stuff here, audio has been loaded
    // for example, play all files one after the other
    var i = 0;
    // once the player ends, play the next one
    player.onended = function() {
    	i++;
        if (i >= audioFiles.length) {
            // end 
            return;
        }
    	play(i);
    };
    // play the first file
    play(i);
}
    
// we start preloading all the audio files
for (var i in audioFiles) {
    preloadAudio(audioFiles[i]);
}

<audio id="player"></audio>

Answer 2

我理解此问题的方式如下：您想使用该功能预加载音频文件。我认为最好的方法是单独定义它们。如果您想将音频片段嵌入网页中，请参考以下示例：

<audio src="audioclip.mp3" controls autoplay preload loop>
    <p>This web browser does not support mp3 format</p>
</audio>

控件：此元素说明天气是否，您是否希望用户在音频文件上具有播放暂停等控件。

自动播放：此元素说明天气情况，您是否希望在加载网页后自动播放音频文件。如果您为项目选择此选项，我建议您也使用preload元素（稍后将对此进行解释），而不是使用controls元素（如果您要的话）。

预加载：这是您的问题一直在寻找的元素。如果包含此元素，则音频文件将在网页加载时预加载。

循环：此元素重复播放音频文件，直到用户停止播放为止（如果启用了控件）

如果该浏览器已经过时且不支持mp3格式，则仅在用户屏幕上显示“此Web浏览器不支持mp3格式”的部分。

为了禁用元素，只需不将其包含在代码中即可。

希望这对您有所帮助！

UPDATE元素应该足以满足您的尝试。