提问人：Mangoo 提问时间：7/21/2023 更新时间：7/21/2023 访问量：71
在 howler.js 中使用变量播放多种声音
Playing multiple sounds using variables in howler.js
问：
我是一个初学者。
我尝试使用howler.js播放多个声源。 我想找到一种更简单的方法来使用变量编写它。
源：
var sound1 = new Howl({src: ['sound01.mp3']}),
sound2 = new Howl({src: ['sound02.mp3']}),
sound3 = new Howl({src: ['sound03.mp3']});
我想玩：
$musicbox.eq(0).on('click', function(){
sound1.play()
});
$musicbox.eq(1).on('click', function(){
sound2.play()
});
$musicbox.eq(2).on('click', function(){
sound3.play()
});
所以我尝试使用变量...
$musicbox.on('click', function(){
var i = $(this).index();
var sound = ["sound" + i]
sound.play()
});
我尝试了几种写作方法，但一直失败。 是否不可能在 howler.js 中创建变量？ 还是我写错了？
答：
0赞
Hasan Raza
7/21/2023
#1
<div class="musicbox">Sound 1</div>
<div class="musicbox">Sound 2</div>
<div class="musicbox">Sound 3</div>
<script>
var sounds = [
new Howl({ src: ['sound1.mp3'] }),
new Howl({ src: ['sound2.mp3'] }),
new Howl({ src: ['sound3.mp3'] })
];
$('.musicbox').on('click', function () {
var i = $('.musicbox').index(this);
sounds[i].play();
});
</script>
评论
0赞
Roko C. Buljan
7/21/2023
$(this).index()很容易给你错误的索引。应改用相对于集合的索引：$musicbox.index(this)
0赞
Roko C. Buljan
7/21/2023
使用纯粹的猜测是没有意义的，把它抛在脑后。一种解决方案是使用 String.prototype.padStart（） - 但同样 - 这不是最好的方法。sound0${i + 1}.mp30
0赞
Roko C. Buljan
7/21/2023
#2
您可以使用 HTML 中的 data-* 属性来实现所需的目标，以便存储要从 Object 播放的声音的键：sounds
<button type="button" data-sound="snare">Snare</button>
<button type="button" data-sound="kick">Kick</button>
那么在JS（jQuery）中，你所需要的只是：
const sounds = {
snare: new Howl({src: ["sound01.mp3"], preload: true}),
kick: new Howl({src: ["sound02.mp3"], preload: true}),
};
$("[data-sound]").on("click", function() {
sounds[$(this).data("sound")].play();
});
或者不需要jQuery（在纯JavaScript中）：
const sounds = {
snare: new Howl({src: ["sound01.mp3"], preload: true}),
kick: new Howl({src: ["sound02.mp3"], preload: true}),
};
document.querySelectorAll("[data-sound]").forEach(elBtn => {
elBtn.addEventListener("click", () => {
sounds[elBtn.dataset.sound].play();
});
});
这样一来，您就可以在代码中更具描述性，而不是猜测要播放的数组索引。假设你想以编程方式播放踢音，你只需使用：
sounds.kick.play();
// or like
// sounds["kick"].play();
评论