单击时的按钮会更改音轨并使所有其他音频静音

Question

目标是使许多按钮在单击时播放不同的音频。每次用户单击一个按钮时，它都会切换音频。如果按下不同音频的非播放按钮，第一个音频停止，只有在第二个音频播放之后。此时有 2 个按钮，几乎一切正常，除非“B”音频具有“播放”类并且您单击第一个音频按钮类不会从第二个按钮中删除并且它们开始同时播放。

单击任何按钮时如何停止音频而不是暂停？

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

谢谢你对第一个问题的回答。根据您的建议，切换开始工作：

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

}

Answer 1

而不是使用document.querySelectoruse&nbsp;document.querySelectorAll- 后者将返回一个元素数组，而 prior 将只返回 1 个元素。有关更多信息document.querySelectorAll

Answer 2

以下可能是原因。&nbsp;&nbsp;var&nbsp;everyAudio&nbsp;=&nbsp;document.querySelector('audio');querySelector只返回一个元素。请使用querySelectorAll获取数组。pause为他们每个人打电话。

Answer 3

由于您建议使用 document.querySelectorAll 而不是 document.querySelector，然后检查整个数组，第一个问题得到了回答。谢谢你！对于第二个问题，我自己找到了解决方案。只需要使用音频 currentTime 音频参数。所以最后看起来是这样的。<script>&nbsp;function play(chord) {&nbsp; var audio = document.getElementById(chord);&nbsp; var active = document.querySelector('.playing');&nbsp; var everyAudio = document.querySelectorAll('audio');&nbsp; if(audio.classList.contains('playing')){&nbsp; &nbsp; &nbsp; audio.pause();&nbsp; }else{&nbsp; &nbsp; &nbsp;for (var i = 0; i < everyAudio.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;everyAudio[i].classList.remove('playing');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;everyAudio[i].pause();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;everyAudio[i].currentTime = 0;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;audio.play();&nbsp;}&nbsp;audio.classList.toggle('playing');}</script><input type="button" value="C Major" onclick="play('C')"><audio id="C">&nbsp;<source src="Tveice_A_09.09.wav" type="audio/wav"></audio><input type="button" value="B Major" onclick="play('B')"><audio id="B">&nbsp;<source src="Black_sand_cello1_raw.wav" type="audio/wav"></audio>