我的网页上有一个音频控件。我希望使用它来播放多个非常短的音频文件，具体取决于页面的状态。我不想在播放文件时加载它们。如何在页面加载时加载所有这些文件？
这是我在做什么的粗略想法：
http://jsfiddle.net/L0c9ccx9/20/
audio.src = ...;
audio.load();
audio.play();
【问题讨论】：
preload="auto"，并显示您正在使用的代码...
标签： html
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>【讨论】：
preloadAudio() 函数，然后将 loadedAudio （在事件侦听器内）更改为您自己的函数 - 这将在您的音频被加载和缓存时调用。
我对这个问题的理解是这样的：你想使用该功能来预加载音频文件。我能想到的最好方法是单独定义它们。如果您想将音频片段嵌入到网页中，下面是一个示例：
<audio src="audioclip.mp3" controls autoplay preload loop>
<p>This web browser does not support mp3 format</p>
</audio>
控件：此元素说明您是否希望用户对音频文件进行播放暂停等控件。
自动播放：此元素说明天气与否，您是否希望在网页加载后自动播放音频文件。如果您为您的项目选择此选项，我建议您也使用 preload 元素（我将在稍后解释）而不是使用 controls 元素（如果您当然想要的话）。
预加载：这是您的问题一直在寻找的元素。如果您包含此元素，音频文件将在网页加载时预加载。
循环：此元素重复播放音频文件，直到用户停止它（如果启用了控件）
只有当浏览器已过时且不支持 mp3 格式时，才会在用户屏幕上显示“此网络浏览器不支持 mp3 格式”的部分。
要禁用某个元素，只需不要将其包含在代码中即可。
希望这有帮助！
UPDATE该元素应该足以满足您的要求。
【讨论】：
如果您想要比<audio> 元素提供的更多控制权，您可以使用网络音频。
使用 XMLHttpRequest 提前获取您的文件并将它们传递给decodeAudioData()。然后，您可以在内存中拥有 AudioBuffer 对象，您可以根据需要触发播放。
Here 演示了几个短样本被预加载和无缝播放 (source)。
（注意：由于ridiculous Chrome bug，上述演示目前仅支持 Firefox。这纯粹是一个编解码器问题：浏览器对 Web Audio 的支持是 actually quite good。在实际应用中，您可能应该至少提供 Vorbis 和 AAC 以获得最大的兼容性。）
【讨论】：