Question

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

以下是我正在做的事情的粗略概念：

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我理解这个问题的方式如下：您想使用该功能预加载音频文件。我能想到的最好方法就是单独定义它们。如果您想将嵌入您的音频剪辑放入网页，请举例说明：

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

控件：此元素表明天气与否，您希望用户对音频文件进行播放暂停等操作。

自动播放：此元素表明天气与否，您希望在加载网页后自动播放音频文件。如果你为你的项目选择这个选项，我建议你也使用preload元素（我将在后面解释），而不是使用controls元素（当然这是你想要的）。

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

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

它所说的部分＆＃34;这个网页浏览器不支持mp3格式＆＃34;如果浏览器已过时且不支持mp3格式，则应仅显示在用户屏幕上。

要禁用某个元素，只需将其包含在代码中即可。

希望这有帮助！

更新元素应该足以满足您的目的。

Answer 3

如果您想要比<audio>元素提供的控制更多，则可以使用Web Audio。

使用XMLHttpRequest提前获取文件并将其传递给decodeAudioData()。然后在内存中有AudioBuffer对象，您可以根据需要触发播放。

Here这是一个预先加载并无间隙播放的几个简短样本的演示（source）。

（注意：由于ridiculous Chrome bug，上述演示目前只支持Firefox。这纯粹是一个编解码器问题：浏览器对Web Audio的支持是 actually quite good。在实际应用中，您应该至少提供Vorbis和AAC以获得最大兼容性。）

Answer 4

您可以拥有一个JSP页面，其中可以访问存储在数据库中的音频文件并将其加载到Map中，其中包含音频文件的某个键和值作为音频文件。只需调用音频文件即可完成播放。

预加载多个音频文件

4 个答案: