Mehrere Audiodateien vorab laden

Question

Ich habe ein einziges Audio-Steuerelement auf meiner Webseite. Ich möchte es verwenden, um mehrere sehr kurze Audiodateien abhängig vom Status der Seite abzuspielen. Ich möchte die Dateien nicht laden, während ich sie spiele. Wie lade ich alle diese Dateien beim Laden der Seite?

Hier ist eine grobe Vorstellung davon, was ich tue:

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

Wenn Sie mehr Kontrolle über das <audio> Element bereitstellt, können Sie verwenden, Webaudio.

Holen Sie Ihre Dateien im Voraus mit XMLHttpRequest und übergeben Sie sie an decodeAudioData(). Sie haben dann AudioBuffer-Objekte im Speicher, von denen Sie die Wiedergabe nach Bedarf auslösen können.

Here ist eine Demo von mehreren kurzen Samples, die vorinstalliert und lückenlos abgespielt werden (source).

. (Anmerkung: auf Grund einer ridiculous Chrome bug die oben Demo ist derzeit Firefox-only Dies ist eine reine Codec-Problem: Browser-Unterstützung für Web Audio ist actually quite good In einer realen Anwendung sollten Sie wahrscheinlich bieten mindestens Vorbis und AAC für. maximale Kompatibilität.)

Answer 3

Der Weg, dass ich diese Frage verstanden habe, ist wie folgt: Sie möchten die Funktion zum Vorladen von Audiodateien verwenden. Der beste Weg, um dies zu tun, ist, sie alle individuell zu definieren. Wenn Sie möchten, dass eine Webseite einbetten Ihre Audio-Clips in, hier ein Beispiel:

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

Controls: dieses Element das Wetter oder nicht, dass Sie den Benutzer wie ein Spiel Pause haben, usw. Kontrollen in der Audiodatei.

Autoplay: Dieses Element gibt Wetter an oder nicht, dass die Audiodatei automatisch abgespielt werden soll, nachdem die Webseite geladen wurde. Wenn Sie diese Option für Ihr Projekt auswählen, empfehle ich, das preload-Element ebenfalls zu verwenden (was ich später erläutern werde) und das Steuerelementelement nicht zu verwenden (wenn Sie das natürlich möchten).

Vorspannung: Dies ist das Element, nach dem Ihre Frage speziell gesucht hat. Wenn Sie dieses Element einschließen, wird die Audiodatei beim Laden der Webseite geladen.

Loop: Dieses Element spielt wiederholt die Audiodatei, bis der Benutzer stoppt (wenn Kontrollen aktiviert ist)

der Teil, wo es heißt „Dieser Web-Browser nicht mp3-Format nicht unterstützt“ sollte nur nach oben auf Der Benutzerbildschirm, wenn der Browser veraltet ist und das MP3-Format nicht unterstützt.

Um ein Element zu deaktivieren, fügen Sie es einfach nicht in den Code ein.

Hoffe das half!

AKTUALISIEREN Das Element sollte für das, was Sie versuchen, ausreichen.

Answer 4

Sie können eine JSP Seite haben, auf der auf die in der Datenbank gespeicherten Audiodateien zugegriffen werden kann und die in eine Map mit einem Schlüssel für Ihre Audiodatei geladen und als Audiodatei bewertet werden können. Und das Abspielen kann einfach durch Aufrufen der Audiodatei erfolgen.