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.您可以使用HTML5 Audio元素的currentTime属性来重新启动音频

将其设置为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。每次单击"声音打开"或其更改后的"声音关闭"形式时，请检查其值。有了它，你就可以播放和停止声音。