jquery 使用howler.js中的变量播放多个声音

g6ll5ycj 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(157)

我是一个初学者开发者。
我尝试使用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中不可能创建变量吗？还是我写错了

jquery

来源：https://stackoverflow.com/questions/76736345/playing-multiple-sounds-using-variables-in-howler-js

2条答案

按热度按时间

vojdkbi01#

<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）回复(0）举报 2023-08-04

to94eoyn2#

您可以在HTML中实现所需的using the data-* attribute，以存储您想要从sounds Object播放的声音的 key：

<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();
  });
});

型
通过这种方式，你可以在代码中更有描述性，而不是猜测数组索引。假设你想以编程方式播放 kick 声音，你只需用途：

sounds.kick.play();
// or like
// sounds["kick"].play();

型

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 使用howler.js中的变量播放多个声音

2条答案

相关问题

热门标签

最新问答