Button stops multiple audio tracks

问题

I am creating a Launchpad, and each row is built of 8 buttons/audio tracks and a stop button. I am wanting each stop button to stop all audio playing on that row when pressed, e.g. Stop Button 1 will stop sound(1) to sound(8). Any ideas? I will leave my code below (Ignore the offImg/onImg that's for the images):

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 *****

EDIT

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 *****

回答1:

Hope this gives you some idea.

var stopButton = ...; // select your stop button

stopButton.addEventListener('click', stopAllAudio);

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

You can select element(s) using the following ways:

Select by Id
Select by ClassName
Select by TagName

You can trigger functions on certain element(s) using addEventListener.

You can loop through selected element(s) using for loop.

回答2:

If all your rows are well defined, you could do something like this :

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>

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

Basicly, you listen to the click on your .stop div.

When one is clicked, you search for all the other img.top elements in the same parent, and then .pause() them one by one.

I used JQuery here because it's way easier & faster. But if you want a pure javascript solution, just tell me.

来源：https://stackoverflow.com/questions/44616153/button-stops-multiple-audio-tracks

标签

javascript