Блог

• Первый щелчок: воспроизведение аудио 1
• Второй щелчок: воспроизведение аудио 2
• Третий щелчок: вернуться к аудио 1

и так далее

Это мои аудиозаписи HTML 2 и кнопка.

 <audio id="breatheIn" src="breathIn.mp3"></audio>
<audio id="breatheOut" src="breathIn.mp3"></audio>
<button class="Breather"id="Breather" value="Inhale">Inhale</button>
 

Мое решение:

 <script>
            var startButton = document.getElementById("Breather");
            var track1 = document.getElementById("audio1");
            var track2 = document.getElementById("audio2");
            var status1 = document.getElementById("playStatus1");
            var status2 = document.getElementById("playStatus2");
            var currTrack = document.getElementById("currTrack");
            
            var play1 = true;
            var started = false;
       
            startButton.onclick = function(){
              if(play1 == true){
                track2.currentTime = 0;
                track2.pause();
                track1.play();
                status2.innerHTML = "stopped"
                status1.innerHTML = "playing";
                currTrack.innerHTML = "Track 1";
                play1 = false;
              }

              else if (play1 == false){
                track1.currentTime = 0;
                track1.pause();
                status1.innerHTML = "stopped";
                status2.innerHTML = "playing";
                track2.play();
                currTrack.innerHTML = "Track 2";
                play1 = true;
                
              }       
            }
    
          </script>```
 

Вам нужно настроить переменную переключения, которая будет переключаться между true и false при нажатии кнопки. Затем вы можете использовать оператор if…else, чтобы определить, в каком состоянии находится переменная. Если это правда, то воспроизведите первый звук. Если это ложь, то играйте в другую и так далее.