Javascript 单击按钮可更改音频曲目并每隔一段时间静音一次

目标是使许多按钮在单击时播放不同的音频。每次用户单击一个按钮时，它都会切换音频。如果按下不同音频的非播放按钮，则第一个音频停止播放，仅在第二个音频播放后停止播放。 现在有两个按钮，一切都很好，除了当“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 audio=document.getElementById（chord）；
var active=document.querySelector（'.playing'）；
var everyAudio=document.querySelector（'audio'）；
if（audio.classList.contains（'playing'））{
audio.pause（）；
}否则{
每一次暂停（）；
everyAudio.classList.remove（'playing'）；
音频播放（）；
}
audio.classList.toggle（'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();
   }
   audio.play();
}

var everyAudio=document.queryselectoral（'audio'）；
if（audio.classList.contains（'playing'））{
audio.pause（）；
}否则{
对于（变量i=0；i

不使用

document.querySelector

使用

document.queryselectoral

-后者将返回一个元素数组，前者仅返回1个元素

---

不使用

文档。querySelector

使用

文档。queryselectoral

-后者将返回一个元素数组，前者将只返回1个元素

---

以下可能是原因

var everyAudio=document.querySelector（'audio'）；

querySelector

只返回一个元素

请使用

querySelectorAll

获取数组。

---

为他们中的每一个呼叫暂停。

以下可能是原因

var everyAudio=document.querySelector（'audio'）；

querySelector

只返回一个元素

请使用

querySelectorAll

获取数组。 为每一个调用

pause

由于您建议使用document.querySelector all而不是document.querySelector，第一个问题得到了回答，然后检查整个数组。谢谢大家!

对于第二个问题，我自己找到了解决办法。只需使用音频currentTime音频参数。最后看起来是这样的

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

功能演奏（和弦）{
var audio=document.getElementById（chord）；
var active=document.querySelector（'.playing'）；
var everyAudio=document.queryselectoral（'audio'）；
if（audio.classList.contains（'playing'））{
audio.pause（）；
}否则{
对于（变量i=0；i

由于您建议使用document.querySelector all而不是document.querySelector，第一个问题得到了回答，然后检查整个数组。谢谢大家!

对于第二个问题，我自己找到了解决办法。只需使用音频currentTime音频参数。最后看起来是这样的

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

功能演奏（和弦）{
var audio=document.getElementById（chord）；
var active=document.querySelector（'.playing'）；
var everyAudio=document.queryselectoral（'audio'）；
if（audio.classList.contains（'playing'））{
audio.pause（）；
}否则{
对于（变量i=0；i

---

很抱歉我应该在写之前重新加载。对不起。我应该在写之前重新加载。