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

<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>

Jquery相关问答推荐

点击和touch 事件之间的jQuery冲突解决方法

在 Mastodon 中将 jQuery 添加到 Rails 6

我需要在上一个表格单元格中显示计算结果

如何使用 aria-expanded="true" 更改 CSS 属性

在文本框中的最后一个字符之后设置焦点

如何在 jQuery 中 Select 特定的表单元素？

Javascript 仅打印 iframe 内容

如何使用jQuery删除父元素

如何在 jQuery 中获取浏览器滚动位置？

将变量传递给jQuery AJAX成功回调中的函数

如何立即启动 setInterval 循环？

如何使用 jQuery UI Resizable 仅水平或垂直调整大小？

Zepto 和 jQuery 2 有什么区别？

调用 e.preventDefault() 后提交表单

如何获取 onclick 调用对象？

使用 D3.js(IE、safari 和 chrome)创建 SVG 后，如何保存/导出 SVG 文件？

我可以将 Nuget 保留在 jQuery 1.9.x/1.x 路径上(而不是升级到 2.x)吗？

Jquery .show() 不显示隐藏可见性的 div

jQuery：如何从 $.ajax.error 方法中获取 HTTP 状态代码？

Fancybox 不适用于 jQuery v1.9.0 [ f.browser 未定义 / 无法读取属性 'msie' ]