我正在使用Javascript和jQuery完成一个项目。项目要求我给按钮添加声音。根据我单击的按钮,应播放不同的声音。我知道如何将单个音频文件添加到按钮,但有人可以帮助我为每个按钮添加不同的音频吗?
$(".btn").on("click" , function () {
let buttonSound = $(this).attr("id");
playSound(buttonSound);
});
我的项目给出了一个随机的颜色,对应于一个按钮。这段代码可以播放那个按钮的声音,但它也可以用我的其他按钮播放那个声音(而不是它们应该播放的声音)。改变声音的唯一方法是刷新屏幕,但这也有同样的问题,只是用了不同的随机按钮。任何帮助将不胜感激。
1条答案
按热度按时间1zmg4dgp1#
.btn
实际上是一个太常见的选择器,无法执行特定的操作。相反,你可以尝试这个更好的策略,那就是使用
data-*
attribute:在jQuery中:
或者如果你喜欢纯JavaScript:
这样你就摆脱了ID选择器,如果需要的话,你可以有多个按钮播放相同的声音-而不会遇到与重复ID相关的问题。
当需要在HTML中存储和检索任意数据时,请始终使用data属性。
PS:
由于您没有提供
playSound
函数的任何代码,对于任何未来的读者来说,上面的代码意味着在给定这样的函数时可以工作:无需提及,您需要调整相对路径
path/to/your/audio/
到您拥有所有音频文件的所需目录。好吧,除非你在data-audio=""
中有完整的路径,文件名和扩展名像data-audo="drumset/crash.mp3"
,在这种情况下,你只需要audio.src = fileName;
或更确切地说audio.src = pathToFile;
。