如何使用Howler JS在单个页面中使用多个播放按钮

Question

在this示例中，我使用Howler JS作为音乐播放器，我需要按类对象创建播放列表，并且能够在同一页面中使用多个播放/暂停按钮。< / p>

所以对于播放列表我做了：

var titx;
var filx;
var idx;
var myplax = [];

$.each($('.btnplay'), function(index, value) { 
    titx = $(this).attr("title");
    filx = $(this).attr("data-track-name");
    idx = $(this).attr("data-id");
    myu = {
      id: idx,
      title: titx,
      file: filx,
      howl: null        
    }
  myplax.push(myu);
});

var player = new Player(myplax);

然后点击页面中有多个播放/暂停按钮的播放按钮，我尝试使用这样的jQuery：

$(".btnplay").click(function(){
  player.play();   
});
$(".btnpause").click(function(){
  player.pause();   
});

但是当我点击任何播放按钮时，它会在每次播放第一首歌曲时开始播放。 此外，如果我点击第二个按钮（顶部的那个），jQuery动画而不是第一个按钮（底部的那个）。

然而，播放列表效果很好，但如何解决播放按钮的问题？