jquery 为不同的按钮添加不同的声音

gcuhipw9  于 2023-05-17  发布在  jQuery
关注(0)|答案(1)|浏览(103)

我正在使用Javascript和jQuery完成一个项目。项目要求我给按钮添加声音。根据我单击的按钮,应播放不同的声音。我知道如何将单个音频文件添加到按钮,但有人可以帮助我为每个按钮添加不同的音频吗?

$(".btn").on("click" , function () {
    let buttonSound = $(this).attr("id");
    playSound(buttonSound);

});

我的项目给出了一个随机的颜色,对应于一个按钮。这段代码可以播放那个按钮的声音,但它也可以用我的其他按钮播放那个声音(而不是它们应该播放的声音)。改变声音的唯一方法是刷新屏幕,但这也有同样的问题,只是用了不同的随机按钮。任何帮助将不胜感激。

1zmg4dgp

1zmg4dgp1#

.btn实际上是一个太常见的选择器,无法执行特定的操作。
相反,你可以尝试这个更好的策略,那就是使用data-* attribute

<button class="btn" data-sound="cat" type="button">Cat</button>
<button class="btn" data-sound="dog" type="button">Dog</button>

在jQuery中:

$("[data-sound]").on("click", function() {
  const buttonSound = $(this).data("sound");
  playSound(buttonSound);
});

或者如果你喜欢纯JavaScript:

document.querySelectorAll("[data-sound]").forEach((elBtn) => {
  elBtn.addEventListener("click", () => {
    playSound(elBtn.dataset.sound);
  });
});

这样你就摆脱了ID选择器,如果需要的话,你可以有多个按钮播放相同的声音-而不会遇到与重复ID相关的问题。
当需要在HTML中存储和检索任意数据时,请始终使用data属性
PS:
由于您没有提供playSound函数的任何代码,对于任何未来的读者来说,上面的代码意味着在给定这样的函数时可以工作:

const playSound = (fileName) => {
  const audio = new Audio();
  audio.src = `path/to/your/audio/${fileName}.mp3`;
  audio.play();
};

无需提及,您需要调整相对路径path/to/your/audio/到您拥有所有音频文件的所需目录。好吧,除非你在data-audio=""中有完整的路径,文件名和扩展名像data-audo="drumset/crash.mp3",在这种情况下,你只需要audio.src = fileName;或更确切地说audio.src = pathToFile;

相关问题