jQuery:如果声音按钮关闭，则将所有声音静音

Question

Heey，我试图编写一个声音控制函数。有人帮我做了这件事，现在我遇到了最后一个问题：如果声音控制按钮关闭，怎么可能同时静音点击按钮？这些按钮应该仍然可以工作，因为稍后应该会有链接。

这是代码：

$(document).ready(function() {
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() {
click_sound.currentTime = 0;
click_sound.play();
});
$(".sound_control").click(function() {
$(".on_off").toggle();
if (background_sound.currentTime) {
background_sound.currentTime = 0;
background_sound.pause();
} else {
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 1

$(".sound_control").click(function () {
$(".on_off").toggle();
if (background_sound.currentTime) {
background_sound.currentTime = 0;
background_sound.pause();
toggleButtons(false)
} else {
background_sound.play();
toggleButtons(true)
}
});
function toggleButtons (isOpen) {
if(isOpen)
$(".click_sound").removeAttr("disabled", "disabled")
else
$(".click_sound").attr("disabled", "disabled")
}

$(document).ready(function () {
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;
const onButtonClick = function () {
click_sound.currentTime = 0;
click_sound.play();
};
$(".click_sound").click(onButtonClick);
$(".sound_control").click(function () {
$(".on_off").toggle();
if (background_sound.currentTime) {
background_sound.currentTime = 0;
background_sound.pause();
toggleButtons(false);
} else {
background_sound.play();
toggleButtons(true);
}
});
function toggleButtons(isOpen) {
if (isOpen) {
$(".click_sound")
.on("click", onButtonClick);
} else {
$(".click_sound").off("click");
}
}
});

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