Блог

1. Цель состоит в том, чтобы сделать много кнопок с разным воспроизведением звука при нажатии. Каждый раз, когда пользователь нажимает на одну кнопку, он переключает звук. Если нажата кнопка, не воспроизводящая другой звук, первый звук останавливается, и только после этого воспроизводится второй. На данный момент есть 2 кнопки, все почти работает нормально, за исключением случаев, когда звук «B» имеет класс «воспроизведение», и вы нажимаете на 1-ю кнопку звука, класс не удаляется со 2-го, и они начинают воспроизводиться одновременно.

2. Как можно сделать остановку звука вместо паузы при нажатии на любую кнопку?

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

Вместо использования document.querySelector use document.querySelectorAll — последний вернет массив элементов, предыдущий вернет только 1 элемент.

Подробнее о document.querySelectorAll

Причиной может быть следующее.

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

querySelector возвращает только один элемент.

Пожалуйста, используйте querySelectorAll для получения массива. Вызовите pause для каждого из них.

1. На первый вопрос был дан ответ благодаря вашим советам использовать document.querySelectorAll вместо document .querySelector, а затем проверьте весь массив. Спасибо!

2. Для второго вопроса я сам нашел решение. Просто нужно использовать audio currentTime audio параметр. В итоге это выглядит так.

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