Question

我正在创建一个Launchpad，每行由8个按钮/音轨和一个停止按钮构成。我希望每个停止按钮在按下时停止在该行上播放的所有音频，例如停止按钮1将停止声音（1）到声音（8）。有任何想法吗？我将在下面留下我的代码（忽略图片中的offImg / onImg）：

JS：

var audio = [];
var isPlaying = [];

function sound(id){
  if(isPlaying[id]){
    audio[id].pause();
    isPlaying[id] = false;
    audio[id].currentTime = 0;
  }
  else{
    audio[id].play();
    isPlaying[id] = true;
    audio[id].currentTime = 0;
  }
}

function createAudio(src,i){
  audio[i] = new Audio();
  audio[i].src = src;
  audio[i].loop = true;
  isPlaying[i] = false;
}

HTML：

<img class="top" src="images/pink.png" onclick="sound(1); this.src = (this.src.endsWith(offD1)? onImgPnk : offD1);"/>
<img class="top" src="images/pink.png" onclick="sound(2); this.src = (this.src.endsWith(offD2)? onImgPnk : offD2);"/>
<img class="top" src="images/pink.png" onclick="sound(3); this.src = (this.src.endsWith(offD3)? onImgPnk : offD3);"/>
<img class="top" src="images/pink.png" onclick="sound(4); this.src = (this.src.endsWith(offD4)? onImgPnk : offD4);"/>
<img class="top" src="images/pink.png" onclick="sound(5); this.src = (this.src.endsWith(offD5)? onImgPnk : offD5);"/>
<img class="top" src="images/pink.png" onclick="sound(6); this.src = (this.src.endsWith(offD6)? onImgPnk : offD6);"/>
<img class="top" src="images/pink.png" onclick="sound(7); this.src = (this.src.endsWith(offD7)? onImgPnk : offD7);"/>
<img class="top" src="images/pink.png" onclick="sound(8); this.src = (this.src.endsWith(offD8)? onImgPnk : offD8);"/>
<img class="muteTop" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<div class="top"></div> ***** <--- THIS IS THE STOP BUTTON *****

修改

var stopButton = document.getElementById(stop1); 

stopButton.addEventListener('click', stopAllAudio);

function stopAllAudio(){
      var audios = document.getElementsByClassName("top"),
          len = audios.length,
          i = 0;
      for (; i < len; i++){
          audios[i].currentTime = 0;
          audios[i].pause();
          isPlaying[i] = false;
      }
}

HTML：

<img class="top" src="images/pink.png" onclick="sound(1); this.src = (this.src.endsWith(offD1)? onImgPnk : offD1);"/>
<img class="top" src="images/pink.png" onclick="sound(2); this.src = (this.src.endsWith(offD2)? onImgPnk : offD2);"/>
<img class="top" src="images/pink.png" onclick="sound(3); this.src = (this.src.endsWith(offD3)? onImgPnk : offD3);"/>
<img class="top" src="images/pink.png" onclick="sound(4); this.src = (this.src.endsWith(offD4)? onImgPnk : offD4);"/>
<img class="top" src="images/pink.png" onclick="sound(5); this.src = (this.src.endsWith(offD5)? onImgPnk : offD5);"/>
<img class="top" src="images/pink.png" onclick="sound(6); this.src = (this.src.endsWith(offD6)? onImgPnk : offD6);"/>
<img class="top" src="images/pink.png" onclick="sound(7); this.src = (this.src.endsWith(offD7)? onImgPnk : offD7);"/>
<img class="top" src="images/pink.png" onclick="sound(8); this.src = (this.src.endsWith(offD8)? onImgPnk : offD8);"/>
<img class="muteTop" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<div class="top" id="stop1"></div> ***** <--- THIS IS THE STOP BUTTON *****

Answer 1

希望这会给你一些想法。

newArr.filter { $0 % newP != 0 }

您可以使用以下方式选择元素：

Select by Id
Select by ClassName
Select by TagName

您可以使用addEventListener触发某些元素的功能。

您可以使用for loop循环选定的元素。

Answer 2

如果您的所有行都已明确定义，则可以执行以下操作：

<强> HTML

<div class="row">
    <img class="top" src="images/pink.png" onclick="sound(1); this.src = (this.src.endsWith(offD1)? onImgPnk : offD1);"/>
    [...]
    <div class="stop"></div>
</div>

<强> JS

$(document).on('click','.stop',function(){
    $(this).siblings('img.top').each(function(){
        audio[$(this).index()+1].pause();
        audio[$(this).index()+1].currentTime = 0;
        isPlaying[$(this).index()+1] = false;
    });
});

基本上，您会听取.stop div。

上的点击

单击一个时，您将搜索同一父级中的所有其他img.top元素，然后逐个.pause()。

我在这里使用JQuery因为它更容易和更方便快点。但是如果你想要一个纯粹的JavaScript解决方案，请告诉我。

按钮可停止多个音轨

2 个答案: