javascript - 多个音频按钮:单击新按钮时，更改先前播放的按钮的类别

Question

我有多个.player-button元素，每个元素都有自己的音频。

单击的元素播放音频，暂停先前播放的元素，并将类更改为.playing。

问题是我需要再次单击.playing元素以将其类更改为.paused。这意味着当我单击另一个.player-button时，只要我不单击它，暂停的那个就不会将其类更改为.paused。这意味着，如果用户仅单击各种元素，他将看到一大堆漂亮的暂停图标!

这是FIDDLE:https://jsfiddle.net/VitoLattarulo/mdcan81n/14/

jQuery(document).ready(function($) {
  $(".player-button").click(function(e) {
    e.preventDefault();
    var song = $(this).prev('audio').get(0);

    if (song.paused) {
      song.play();
      $(this).addClass("playing");
      $(this).removeClass("paused");
    } else {
      song.pause();
      $(this).addClass("paused");
      $(this).removeClass("playing");
    }
  });

  document.addEventListener('play', function(e) {
    var audios = document.getElementsByTagName('audio');
    for (var i = 0, len = audios.length; i < len; i++) {
      if (audios[i] != e.target) {
        audios[i].pause();
      }
    }
  }, true);
});

我显然需要一种将两个功能合并在一起的方法，但是我仍然是一个新手，无法弄清楚该怎么做。

我将非常感谢您的帮助!这是我发布第一个网站^ _ ^之前要解决的最后一个问题

Answer 1

由于您不是使用这些类来确定按钮状态，而是仅使用它们来进行样式设置，因此我将在单击任何按钮时删除所有paused和playing类，然后按需要重置这些类，如下所示:

jQuery(document).ready(function($) {
  $(".player-button").click(function(e) {
    e.preventDefault();
    var $this=$(this); // cache this
    var song = $this.prev('audio').get(0);
    $(".player-button").removeClass("paused playing");
    if (song.paused) {
      song.play();
      $this.addClass("playing");
    } else {
      song.pause();
      $this.addClass("paused");
    }
  });
  document.addEventListener('play', function(e) {
    var audios = document.getElementsByTagName('audio');
    for (var i = 0, len = audios.length; i < len; i++) {
      if (audios[i] != e.target) {
        audios[i].pause();
      }
    }
  }, true);
  document.addEventListener('ended', function(e) {
    $(".player-button").removeClass("paused playing");
  }, true);

});

Updated jsFiddle