Wie kann ich meine Webseite schnell laden, wenn ich viele Audiodateien benötige?

Question

Ich bin ziemlich neu im Webdesign und ich baue eine Webseite zum Lernen der Cherokee Silbenschrift. Die Hauptseite ist eine Tabelle mit 85 Zeichen, die den Sound für den Charakter spielt, wenn Sie auf einen klicken. Zur Zeit habe ich alle Sound-Dateien in beiden MP3- und .oog-Formaten in einem/Sounds-Ordner gespeichert, und ich habe 85 verschiedene <audio> Tags am Ende meines HTML-Dokuments, und spielen sie mit jQuery wie unten gezeigt. Die Seitenladezeit ist auf meinem Laptop in Ordnung, aber auf meinem Handy ist es sehr langsam, und ich nehme an, das liegt an all den Sounddateien. Wie kann ich das so implementieren, dass die Seite schneller geladen wird?

$('td').click(function(){ 
 
    var name = $(this).find('.tbl-en').html(); 
 
    var tag = 'audio-' + name; 
 
    var sound = document.getElementById(tag); 
 
    sound.play(); 
 
});

<audio id="audio-a"> 
 
    <source src="sounds/a.mp3" type="audio/mp3"> 
 
    <source src="sounds/a.oog" type="audio/oog"> 
 
</audio>

Answer 1

Stellen Sie das src Attribut, bis der Benutzer auf das Element geklickt hat. Hier ein Beispiel:

http://codepen.io/tevko/pen/raQMjP