Jquery HTML5音频播放器-暂停除当前迭代之外的多个音频元素

我有一个工作的音频播放器阵列，但问题是该代码允许用户同时播放多首曲目。我想在单击“播放”时暂停所有音频播放器，但所选音频播放器除外。这已经完成，但现在我不知道如何将受影响的按钮图像从暂停更改为播放。{loop.index}语法是twig，它为#play-btn id和#pause-btn id的每个实例提供了一个唯一的名称，例如：#play-btn1-以防有人怀疑

 <script>
 $(document).ready(function(){
     let play = "#play-btn" + {{ loop.index }};
     let pause = "#pause-btn" + {{ loop.index }};

 $(play).click(function(){
     $(this).hide();
     $(pause).attr( "style", "display: inline-block;" );
      });

 $(pause).click(function(){
     $(this).hide();
     $(play).show();
     }); 
 });

window.addEventListener("play", function(evt) {
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target){
        window.$_currentlyPlaying.pause();
             } 
        window.$_currentlyPlaying = evt.target;
        }, true);

</script>

<div class="flex justify-center">
  <div class="my-auto">
    <audio id="player{{ loop.index }}" src="{{ block.audio.one.url }}" style="width: 0px;"></audio>
     <a class="play-btn audio-btn" id="play-btn{{ loop.index }}" onclick="document.getElementById('player'+ {{ loop.index }}).play()"></a>
     <a class="pause-btn audio-btn" id="pause-btn{{ loop.index }}" onclick="document.getElementById('player' + {{ loop.index }}).pause()"></a>
                </div> 

$（文档）.ready（函数（）{
让play=“#play btn”+{{loop.index}；
让pause=“#pause btn”+{{loop.index}；
$（播放）。单击（函数（）{
$（this.hide（）；
$（暂停）.attr（“样式”，“显示：内联块；”）；
});
$（暂停）。单击（函数（）{
$（this.hide（）；
$（play.show（）；
}); 
});
window.addEventListener（“播放”，函数（evt）{
if（window.$\u currentlyPlaying&&window.$\u currentlyPlaying！=evt.target）{
窗口。$\u当前正在播放。暂停（）；
} 
窗口。$\u currentlyPlaying=evt.target；
}，对）；