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 类。然后，它会自动STOPS所有音频并将它们回卷到0.然后每个按钮删除类PLAYING表单。最后，它会检查您单击的按钮是否具有 PLAYING 类;如果没有，则将类 PLAYING 添加到按钮，并播放附加到该按钮的音频。

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

jQuery Soundboard - 播放ONE按钮会关闭所有其他按钮

1 个答案: