javascript - jQuery Soundboard-播放一个按钮会关闭所有其他按钮

Question

我正在创建一个jQuery / PHP音板，并且试图弄清楚如果我单击一个按钮，该代码将停止附加到所有其他按钮的HTML5音频的编码。到目前为止，这是我的代码:

JQUERY:

$(function() {
            $("audio").removeAttr("controls").each(function(i, audioElement) {
                var audio = $(this);
                var that = this; //closure to keep reference to current audio tag
                $("#doc").append(
                    $('<button>'+audio.attr("title")+'</button>').toggle(
                        function() {
                            that.play();
                            $(this).addClass('playing');
                        }, 
                        function(){
                            that.pause(); that.currentTime = 0;
                            $(this).removeClass('playing');
                        }));
            });
        });
    </script>

PHP:

<?php foreach($files as $file) { ?>
     <?php $title = str_replace(".mp3", "", str_replace("clips/", "", $file)); ?>
     <audio src="<?php echo $file; ?>" controls autobuffer="true" title="<?php echo $title ?>"></audio>
<?php } ?>

Answer 1

修改的jQuery:

$('<button>'+audio.attr("title")+'</button>').click(
   function(e) {
      var playing = $(this).hasClass("playing");
      $("audio").each(function(i, audioElement){
         this.pause();
         this.currentTime = 0;
      });

      $("button").each(function( i ) {
         $(this).removeClass('playing');
      });

      if (!playing){
         that.play();
         $(this).addClass('playing');
      }
   })
);
$("audio").bind("ended", function(){ $("button").removeClass('playing'); });

说明:

当您单击任何按钮时，如果按钮具有PLAYING类，它将声明一个变量。然后，它会自动停止所有音频并将其倒回0。然后从每个按钮上删除PLAYING类。最后，它检查您刚刚单击的按钮是否具有PLAYING类；如果不是，则将“播放”类添加到按钮，并播放附加到该按钮的音频。

音频播放完毕后，底部添加的行会触发，播放类自动删除