Javascript 暂停所有其他音频，并在单击给定音频时更改其图标

我正在动态地创建一组音频元素。当点击其中一个时，我希望它播放音频并暂停所有其他音频，并相应地切换每个音频的图标，以便准确地表示它是否仍在播放

我目前有办法暂停所有其他音频，但我无法正确更新它们的图标

$（文档）.ready（函数（）{
$.ajax({
url:“/start analysis”，
键入：“POST”，
成功：功能（响应）{
让tracks=JSON.parse（JSON.stringify（response））；
for（设i=0；i

我试图避免使用全局变量，但使用音频的

数组（）

可能会容易得多。

• 无需使用（…为每个按钮创建单击事件

您需要提醒自己，代码中的

播放器按钮

是领导者，因此您必须从该按钮开始任何操作

根据上面的注释，只需为所有

播放器按钮创建一次单击事件，然后控制类并从中暂停/播放即可

$(document).ready(function() {
  $.ajax({
      url: '/start-analysis',
      type: 'POST',
      success: function(response) {
          let tracks = JSON.parse(JSON.stringify(response));
          for (let i = 0; i < Object.keys(tracks).length; i++) {
              let preview_url = tracks[i]['preview_url'];
              let $track = $(`
<div class="play-container">
  <audio class="player" src="${preview_url}" preload="none" onended="on_playing_ended(this);"></audio>
  <div class="player-button play-icon"></div>
</div>`
                  );
              $('.result-playlist-body').append($track);
          } 
      }
  });

  $(document).on('click' , '.player-button' , function(){
    var This_Button = $(this),
        This_audio = $(this).parent().find('audio')[0];

    if($('.player-button.pause-icon').not(This_Button).length){
       var The_previous_button = $('.player-button.pause-icon').not(This_Button),
           The_previous_audio = $('.player-button.pause-icon').parent().find('audio')[0];
       The_previous_button.toggleClass('play-icon pause-icon');
       The_previous_audio.pause();
    }
    This_Button.toggleClass('play-icon pause-icon');
    This_audio.paused ? This_audio.play() : This_audio.pause();
  })
});
function on_playing_ended(el){
  $(el).parent().find('.player-button').toggleClass('play-icon pause-icon');
}

.player按钮{
填充：10px；
利润率：10px；
颜色：#fff；
边界半径：50px；
宽度：20px；
文本对齐：居中；
光标：指针；
}
.播放图标{
背景：蓝色；
}
.暂停图标{
背景：红色；
}

>
>
>
我想您需要添加
播放图标
类并删除
暂停图标
类。