jQuery 咔噠聲和背景聲帶開關 function

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.您可以使用 HTML5 音頻元素的currentTime屬性來重新啟動音頻

將其設置為0然后再次播放（）聲音

2.將hover事件替換為background_sound.loop = true; 播放背景聲音 onload

3.對於背景聲音切換使用這個內部開/關按鈕.click事件

4.添加變量SOUND_ON & inside button click check 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

創建一個 boolean 變量，並在用戶單擊“Sound on”按鈕時將其值相應地更改為 True/False。 每次單擊“Sound on”或其更改形式的“Sound off”時檢查其值。 有了它，您可以播放和停止聲音。