CODEWITHSUNDEEP
javascripthtml
deweius
deweius

Reputation: 35

Button when clicked changes audio track and mute every other audio

  1. The goal is to make many buttons with different audio playing when clicked. Every time user is clicking on one button, it is toggling audio. If non-playing button for different audio is pressed, first audio stops and only after that 2nd one plays. At this moment there are 2 buttons, everything almost working fine, except when 'B' audio has class 'playing' and you click on 1st audio button class won't remove from the 2nd one and they start to play simultaneously.

  2. How is possible to make stop audio instead of pause when clicked on any of the button?

    <script>
 function play(chord) {
  var audio = document.getElementById(chord);
  var active = document.querySelector('.playing');
  var everyAudio = document.querySelector('audio');

  if(audio.classList.contains('playing')){
     audio.pause();
  }else {
     everyAudio.pause();
     everyAudio.classList.remove('playing');
     audio.play();
  }
  audio.classList.toggle('playing');
 }
</script>

<input type="button" value="C Major" onclick="play('C')">
<audio id="C">
 <source src="Tveice_A_09.09.wav" type="audio/wav">
</audio>

<input type="button" value="B Major" onclick="play('B')">
<audio id="B">
 <source src="Black_sand_cello1_raw.wav" type="audio/wav">
</audio>

Thank you for the answer on the first question. With your advice, toggling started to work:

var everyAudio = document.querySelectorAll('audio');


if(audio.classList.contains('playing')){
   audio.pause();
}else{
   for (var i = 0; i < everyAudio.length; i++){
     everyAudio[i].classList.remove('playing');
     everyAudio[i].pause();
   }
   audio.play();
}

Upvotes: 1

Views: 54

Answers (3)

deweius
deweius

Reputation: 35

  1. First question was answered thanks to your advices to use document.querySelectorAll instead of document.querySelector, and then check whole array. Thank you!

  2. For second question I've found solution by myself. Simply need to use audio currentTime audio parameter. So it looks like this in the end.

    <script>
 function play(chord) {
  var audio = document.getElementById(chord);
  var active = document.querySelector('.playing');
  var everyAudio = document.querySelectorAll('audio');

  if(audio.classList.contains('playing')){
      audio.pause();
  }else{
     for (var i = 0; i < everyAudio.length; i++){
         everyAudio[i].classList.remove('playing');
         everyAudio[i].pause();
         everyAudio[i].currentTime = 0;
     }
     audio.play();
 }
 audio.classList.toggle('playing');
}
</script>

<input type="button" value="C Major" onclick="play('C')">
<audio id="C">
 <source src="Tveice_A_09.09.wav" type="audio/wav">
</audio>

<input type="button" value="B Major" onclick="play('B')">
<audio id="B">
 <source src="Black_sand_cello1_raw.wav" type="audio/wav">
</audio>

Upvotes: 0

kako-jun
kako-jun

Reputation: 183

The following may be the cause.

  var everyAudio = document.querySelector('audio');

querySelector returns only one element.

Please use querySelectorAll to get the array. Call pause for each of them.

Upvotes: 2

VirxEC
VirxEC

Reputation: 1044

Instead of using document.querySelector use document.querySelectorAll - the latter will return an array of elements, the prior will only return 1 element.

More info on document.querySelectorAll

Upvotes: 2

Related Questions