Question

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

我目前可以暂停所有其他音频，但是我无法正确更新其图标。

$(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"></audio>
    <div class="player-button play-icon"></div>
</div>`
                    );
                $('.result-playlist-body').append($track);
            }

            var $playButtons = $('.player-button');
            var $players = $('.player'); 
            for (var i = 0; i < $playButtons.length; i++) {
                var playButton = $playButtons[i];
                var player = $players[i];
                $(playButton).click(onPlayClick.bind(null, playButton, player));
            }   
        }
    });

    function onPlayClick(playButton, player) {
        $('audio').each(function() {
            var myAudio = this;
            this.addEventListener('play', function () {
                $('audio').each(function() {
                    if (!(this === myAudio)) {
                        // this pauses all other audios correctly
                        this.pause();
                        // this does not update the other audios' icons correctly
                        $(this).removeClass('play-icon');
                        $(this).addClass('pause-icon');
                    }
                });
            });
        });
        $(playButton).toggleClass("play-icon pause-icon");
        player.paused ? player.play() : player.pause();  
    }
});

我正在尝试避免使用全局变量，但是拥有Array()音频可能会容易得多。

Answer 1

无需使用for(...为每个按钮创建点击事件

您需要提醒自己，代码中的player-button是领导者，因此您必须从此按钮开始任何操作

从上面的注释中，只需为所有player-button创建一个单击事件，然后控制类并从中暂停/播放即可。

$(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');
}

这是其工作方式的示例

$(document).ready(function(){
  $(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-button{
  padding : 10px;
  margin : 10px;
  color : #fff;
  border-radius : 50px;
  width : 20px;
  text-align : center;
  cursor : pointer;
}
.play-icon{
  background : blue;
}
.pause-icon{
  background : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
  <audio class="player" src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg" onended="on_playing_ended(this);"></audio>
  <div class="player-button play-icon">></div>
</div>
<div class="">
  <audio class="player" src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg" onended="on_playing_ended(this);"></audio>
  <div class="player-button play-icon">></div>
</div>
<div class="">
  <audio class="player" src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg" onended="on_playing_ended(this);"></audio>
  <div class="player-button play-icon">></div>
</div>

别忘了将onended="on_playing_ended(this);"添加到您的元素

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

1 个答案: