Question

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

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

示例：

<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"));

这解决了总是必须让按钮ID与文件名匹配的问题，这在某些时候可能会成为一个问题。

您可以进一步处理并处理每个音频对象的加载事件，将每个按钮设置为最初禁用，并仅在成功加载音频对象时启用它们。这种方法只是让你更容易添加这样的东西，因为你只有1段代码用于设置，1段代码用于按钮。

强制客户端从特定文件夹

1 个答案: