Javascript 多个音频按钮：单击新按钮时更改以前播放的按钮的类别

我有多个

.player按钮

元素，每个元素都有自己的音频

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

。播放

问题是我需要再次单击

.playing

元素，将其类更改为

。暂停

。这意味着，当我单击另一个

.player按钮时，暂停的按钮不会将其类更改为
.paused
，只要我不单击它。这意味着，如果用户只需单击各种元素，他将看到一大堆漂亮的暂停图标

这是小提琴：

jQuery（文档）.ready（函数（$）{
$（“.player按钮”）。单击（函数（e）{
e、 预防默认值（）；
var song=$（this.prev（'audio'）.get（0）；
如果（歌曲暂停）{
歌曲。游戏（）；
$（此）.addClass（“播放”）；
$（this.removeClass（“暂停”）；
}否则{
歌曲。暂停（）；
$（this.addClass（“暂停”）；
$（此）.removeClass（“播放”）；
}
});
文档.添加的事件列表器（'play'，函数（e）{
var audios=document.getElementsByTagName（'audio'）；
对于（var i=0，len=audios.length；i

我显然需要一种将这两个函数合并在一起的方法，但我仍然是一个新手，不知道怎么做

我真的非常感谢任何帮助！这是我发布我的第一个网站之前要解决的最后一个问题^ ^
因为您没有使用类来确定按钮状态，并且只使用它们进行样式设置，所以我只需在单击任何按钮时删除所有
暂停的
和
播放的
类，然后根据需要重置类，如下所示：

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

});

jQuery（文档）.ready（函数（$）{
$（“.player按钮”）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；//缓存此
var song=$this.prev（'audio'）.get（0）；
$（“.player按钮”）.removeClass（“暂停播放”）；
如果（歌曲暂停）{
歌曲。游戏（）；
$this.addClass（“播放”）；
}否则{
歌曲。暂停（）；
$this.addClass（“暂停”）；
}
});
文档.添加的事件列表器（'play'，函数（e）{
var audios=document.getElementsByTagName（'audio'）；
对于（var i=0，len=audios.length；i

我刚刚注意到，在曲目的末尾，图标remaines暂停了。有没有办法在曲目结束后对其进行最后的润色，并将课程改回“暂停”

？在这里，我真的不知道该怎么做。@Vito你是说“在曲目的结尾，图标仍在播放”吗？为此，您需要使用

addEventListener（'ended'

，请参阅上面的更新：）您是对的，这正是我的意思。它工作完美，你是一个大师！我在这里学到了很多！谢谢：）

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

});