Precaricamento di più file audio

Question

Ho un singolo controllo audio sulla mia pagina web. Vorrei usarlo per riprodurre più file audio molto brevi a seconda dello stato della pagina. Non desidero caricare i file mentre li gioco. Come carico tutti questi file al caricamento della pagina?

Ecco è una vaga idea di quello che sto facendo:

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){ 
 
    \t // all have loaded 
 
    \t 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() { 
 
    \t i++; 
 
     if (i >= audioFiles.length) { 
 
      // end 
 
      return; 
 
     } 
 
    \t 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

Se si vuole più controllo rispetto all'elemento <audio> fornisce è possibile utilizzare Audio Web.

Recupera i file in anticipo con XMLHttpRequest e passali a decodeAudioData(). Quindi hai gli oggetti AudioBuffer in memoria che puoi attivare la riproduzione come richiesto.

Here è una demo di numerosi campioni brevi precaricati e riprodotti senza pause (source).

. (Nota: a causa di un ridiculous Chrome bug quanto sopra demo è attualmente Firefox-only Questo è puramente un problema di codec: il supporto del browser per il Web Audio è actually quite good In un'applicazione reale probabilmente si dovrebbe offrire almeno Vorbis e AAC per. massima compatibilità)

Answer 3

Il modo in cui ho compreso questa domanda è il seguente: si desidera utilizzare la funzione per precaricare i file audio. Il modo migliore che posso pensare di fare questo è definirli tutti individualmente. Se volete Embed i clip audio in una pagina web, ecco un esempio:

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

Controlli: Questo elemento Uniti Previsioni o non si vorrebbe che l'utente abbia pausa il gioco, ecc controlli sul file audio.

Autoplay: questo elemento indica o non si desidera che il file audio venga riprodotto automaticamente dopo il caricamento della pagina Web. Se scegli questa opzione per il tuo progetto, ti consiglio di usare anche l'elemento di preload (che spiegherò più avanti) e di non usare l'elemento controls (se ovviamente questo è ciò che vuoi).

Precarico: Questo è l'elemento che la tua domanda è stata specificamente cercando. Se includi questo elemento, il file audio si precaricherà mentre la pagina web si sta caricando.

loop: Questo elemento riproduce ripetutamente il file audio fino a quando l'utente interrompe (se controlli è abilitata)

la parte in cui si dice "questo browser non supporta il formato mp3" dovrebbe mostrare solo su lo schermo degli utenti se il browser non è aggiornato e non supporta il formato mp3.

Per disabilitare un elemento, è sufficiente non includerlo nel codice.

Spero che questo ha aiutato!

UPDATE l'elemento dovrebbe essere sufficiente per ciò che si sta tentando di fare.

Answer 4

È possibile avere una pagina JSP in cui è possibile accedere ai file audio memorizzati nel database e caricarli in una mappa con una chiave per il file audio e valore come file audio. E suonare può essere fatto semplicemente chiamando il file audio.