强制客户端从特定文件夹预加载音频文件

Question

我开发了一个声板，你有很多按钮，如果你点击一个按钮，然后一个声音播放。是否有办法迫使客户端预加载特定文件夹中的所有音频文件，以便在页面加载后，即使internet连接中断，它们也可用？

我知道的唯一方法是为每个音频文件创建一个变量，在每个按钮中添加一个id，并为单击事件添加事件侦听器。

示例：

<button class="button" id="soundfile01">
    Test
</button>

...

var soundfile01 = new Audio("audio/soundfile01.mp3");    

$("#soundfile01").click(function() {
    soundfile01.play();
});

但每一个按钮都有很多工作要做。

我还可以给每个按钮一个带有音频文件名称的id，然后按如下方式对其进行编码：

$(".button").click(function() {
    var id = $(this).attr("id");
    var audio = new Audio("audio/"+id+".mp3");

    audio.play();
});

如果失去了网络连接，它就不再起作用了，但对于我来说，重要的是，如果页面已经被加载，互联网被断开了，这也是很重要的，因为我计划使用我的智能手机上的声卡，在家里预加载网页，然后让网站一整天开放，这样我就可以在任何地方使用它，即使我没有互联网连接。

我知道我可以制作一个应用程序，但只有为其开发的平台的所有者才能使用它，维护或更新多个应用程序将是一项艰巨的工作。

第一个例子中的代码是解决这个问题的唯一方法吗？

Answer 1

这两种方法的混合将帮助你走出困境。首先，为每个按钮创建一个音频对象，然后使用按钮单击事件来播放每个对象.

// create an object that has an audio object for each button
var audio = {};
$(".button").each(function() {
    audio[this.id] = new Audio("audio/" + this.id + ".mp3");
});

// assign the click event handler
$(".button").click(function() {
    audio[this.id].play();
});

注意：我删除了$(this).attr("id")，因为您可以在jQuery处理程序中使用this.id。

我还建议对附加到mp3文件的每个按钮使用一个数据属性，类似于.

<button id="sound01" class=".button" data-mp3-file="audio/some-filename.mp3">Sound 1</button>

那么创建音频对象的代码就会变成..。

audio[this.id] = new Audio($(this).data("mp3-file"));

这解决了始终必须使按钮ids与文件名匹配的问题，这在某个时候可能会成为一个问题。

您可以进一步处理每个音频对象的load事件，将每个按钮设置为初始禁用，并且只有在音频对象成功加载时才启用它们。这种方法只会使添加这样的东西变得更容易，因为您只有1段代码用于安装，1段代码用于按钮。