javascript - 太多的音频标签使我的网站加载速度非常慢。有解决办法吗？

Question

我制作了一个网站(尚未播出)，并通过一些免费托管对其进行了实时测试。 该网站包含一个 map 标签和其中的大图片。 我这样做是为了如果有人点击图片的一部分，就会根据他点击的位置听到特定的音频。

我的问题是，有很多音频标签(大约 300 个)，而且由于有很多占用带宽的文件，网站完全加载需要大约 10 分钟，这意味着大多数音频无法播放几分钟。

我想知道是否有一种方法，也许是一种使用 javascript 或 PHP 的响应式方法，可以让我仅在用户单击 map 时制作这些音频标签。这样它就不会使用那么多带宽。另外，如果有人能想到更好的方法，我们将不胜感激。

我正在为点击事件添加 JavaScript，以便您可以了解它的全部内容 -

$('#Swensens_maze').click(function(){
        $('audio').each(function(){
        this.pause(); // Stop playing
         // Reset time
        });
        $('#Swensens_maze_audio').get(0).play();
        return false;
    });

这只是众多例子中的一个。 “#swensens_maze”是区域标签，“#Swensens_maze_audio”是它的音频标签。

Answer 1

发生您的问题是因为浏览器尝试为每个音频标签预加载音频。 所以答案就是将audio标签中的属性preload设置为值none

<audio preload="none">