当我需要大量声音文件时，如何让我的网页快速加载？

Question

I'm pretty new to web design and I'm building a webpage for learning the Cherokee syllabary. The main page is a table of 85 characters that plays the sound for the character when you click on one. Currently I have all of the sound files stored in both .mp3 and .oog formats in a /sounds folder, and I put 85 different <audio> tags at the end of my html document, and play them using jQuery as shown below. The page load time is okay on my laptop but on my phone it's really slow, and I assume this is because of all of the sound files. How can I implement this in a way that loads the page more quickly?

 $('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

Don't set the src attribute until the user has clicked on that element. Here is an example:

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