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

Question

我是网页设计的新手，我正在构建一个网页来学习切诺基音节。主页是一个包含 85 个字符的表格，当您单击一个字符时，它会播放该字符的声音。目前，我将所有声音文件以 .mp3 和 .oog 格式存储在 /sounds 文件夹中，并在我的 html 文档末尾放置了 85 个不同的 <audio> 标签，并使用 jQuery 播放它们，如下所示。我的笔记本电脑上的页面加载时间还可以，但在我的手机上它真的很慢，我认为这是因为所有的声音文件。如何以更快加载页面的方式实现这一点？

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

在用户单击该元素之前不要设置src 属性。这是一个例子：

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