jQuery щелчок и фоновый звук с функцией включения и выключения

Question

Мне нужно jQuery щелчок и фоновый звук с переключателем включения и выключения.

Важно следующее:

1. Фоновый звук должен воспроизводиться бесконечно зацикленным, когда страницы загружен. Но: в начале все должно быть тихо.
2. Если вы нажмете кнопку «Звук включен», фоновый звук должен быть слышен. Кроме того, звук щелчка должен быть слышимым.
3. Возможно, более одного звука щелчка должно быть слышно одновременно.
4. Если вы нажмете кнопку «Звук выключен», все должно быть тихо снова.

Это то, что я до сих пор кодировал:

$(".sound_control").click(function() {
  $(".on_off").toggle();
});


$(document).ready(function() {

  var background_sound = document.createElement("audio"); // This is the background sound function.
  background_sound.src = "https://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3";
  background_sound.volume = 0.1;
  background_sound.autoPlay = true;
  background_sound.preLoad = true;
  background_sound.controls = true;
  $("*").hover(function() { // The sound should start playing when the website is loaded. I think the hover function is not the best solution. Also, the sound should be looped.
    background_sound.play();
  });

  var click_sound = document.createElement("audio"); // This is the click sound function. It should work for every button with the .click_sound class.
  click_sound.src = "http://soundbible.com/mp3/Stapler-SoundBible.com-374581609.mp3";
  click_sound.volume = 0.1;
  click_sound.autoPlay = false;
  click_sound.preLoad = true;
  click_sound.controls = true;
  $(".click_sound").click(function() {
    click_sound.play();
  });

});

.on_off:nth-child(2) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="sound_control">Sound <span class="on_off">on</span><span class="on_off">off</span></button>

<button class="click_sound">Button One</button>
<button class="click_sound">Button Two</button>
<button class="click_sound">Button Three</button>
<button class="click_sound">Button Four</button>

Я был бы так счастлив, если бы кто-нибудь мог мне помочь. :)

Answer 1

1. вы можете использовать currentTime свойство HTML5 Аудиоэлемент для перезапуска аудио

установить его на 0, затем воспроизвести () звук снова

2. замените событие наведения на background_sound.loop = true; для воспроизведения фонового звука при загрузке

3. для переключения фонового звука используйте это внутри вкл / выкл кнопка .click событие

4. добавить переменную SOUND_ON и внутри кнопки нажать кнопку проверки if(SOUND_ON){}, затем воспроизвести звук щелчка

 if (background_sound.currentTime){
  background_sound.currentTime = 0;
  background_sound.pause();
  }else{
    background_sound.play();  
  }

запустить код ниже .. . надеюсь, что помощь?

$(document).ready(function() {
  var SOUND_ON = 1;
  var background_sound = document.createElement("audio");
  background_sound.src = "https://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3";
  background_sound.volume = 0.1;
  background_sound.autoPlay = true;
  background_sound.loop = true;
  background_sound.controls = true;
  background_sound.play();


  var click_sound = document.createElement("audio");
  click_sound.src = "http://soundbible.com/mp3/Stapler-SoundBible.com-374581609.mp3";
  click_sound.volume = 0.1;
  click_sound.autoPlay = false;
  click_sound.preLoad = true;
  click_sound.controls = true;


  $(".click_sound").click(function() {
    if (SOUND_ON) {
      click_sound.currentTime = 0;
      click_sound.play();
    }
  });

  $(".sound_control").click(function() {
    $(".on_off").toggle();
    if (background_sound.currentTime) {
      background_sound.currentTime = 0;
      SOUND_ON = 0;
      background_sound.pause();
    } else {
      SOUND_ON = 1;
      background_sound.play();
    }
  });

});

.on_off:nth-child(2) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="sound_control">Sound <span class="on_off">on</span><span class="on_off">off</span></button>

<button class="click_sound">Button One</button>
<button class="click_sound">Button Two</button>
<button class="click_sound">Button Three</button>
<button class="click_sound">Button Four</button>

Answer 2

Создайте одну логическую переменную и измените ее значение на True / False соответственно, когда пользователь нажимает кнопку «Включить звук». Проверяйте его значение каждый раз, когда щелкает «Звук включен» или его измененная форма «Звук выключен». С этим вы можете играть и остановить звук.