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

不是使用// this.state.groups Array [ Object { "groupId": "5jQbusWKs9kb6p4f2AJP", }, Object { "groupId": "7E9udwJU7qR8uklhNiiK", }, ...... ] // this.props.newGroups Array [ Object { "groupId": "KzHdtPjUAGmEmZIS1SjX" }, Object { "groupId": "JHGfIaidSVH8HaPST5Nw" }, ]，而是使用document.querySelector-后者将返回元素数组，而前者将仅返回1个元素。

More info on document.querySelectorAll

Answer 2

以下可能是原因。

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

querySelector仅返回一个元素。

请使用querySelectorAll获取数组。分别致电pause。

Answer 3

由于您的建议使用了document.querySelectorAll而不是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>

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

3 个答案: