为网站中的静音/取消静音设置 cookie答案

【问题标题】：Set cookie for mute/unmute sound in website为网站中的静音/取消静音设置 cookie
【发布时间】：2021-06-06 05:29:36
【问题描述】：

我需要帮助才能关闭和打开网站上按钮的声音。我无法通过按下切换开关打开和关闭并通过 localStorage 或 Cookies 存储它来做到这一点。如果有人知道如何解决它，我将不胜感激。 Т谢谢！

HTML

<div class="setting">
        <input class="sound-toggle" type="checkbox" id="sound-toggle" />
        <label for="sound-toggle">Звук</label>
</div>
<audio id="audio" src="audio/tap.mp3"></audio>

$("audio").prop('muted', false);

$(".sound-toggle").click( function (){
if( $("audio").prop('muted') ) {
      $("audio").prop('muted', false);
} else {
  $("audio").prop('muted', true);
}
});

【问题讨论】：

标签： javascript html audio toggle

【解决方案1】：

我就是这样做的：https://github.com/gregor-dev-443/gregor-dev-443.github.io/blob/main/buttontapsoundstest.html.
您可以在https://gregor-dev-443.github.io/buttontapsoundstest.html 试用。
注意：声音需要一些时间才能加载，因此不会立即生效。
我无法使用嵌入式 sn-p，因为它们不允许使用本地存储。

编辑链接现在失效了，这是代码：

<!DOCTYPE html>
<html>
<head>
  <title>Test for button tap sounds</title>
  <meta charset="utf-8" />
</head>
<body>
  <h1>Test for button tap sounds</h1>
  <p>
    <input type="checkbox" id="mute-checkbox" check />
    <label for="mute-checkbox">Mute</label>
  </p>
  <p>
    <button id="test-button">Test</button>
  </p>
  <audio id="tap-sound" src="https://opengameart.org/sites/default/files/Menu%20Selection%20Click.wav"></audio>
  <script>
    //Store the HTML elements in variables
    const muteCheckbox = document.getElementById("mute-checkbox");
    const tapSound = document.getElementById("tap-sound");
    const testButton = document.getElementById("test-button");
    
    //Automatically enable the checkbox when the item "muted" is present in local storage
    if (localStorage.getItem("muted")) {
      muteCheckbox.checked = true;
    }

    //Add the item "muted" to local storage when the checkbox is enabled and remove the item when it isn't enabled anymore
    muteCheckbox.addEventListener("change", () => {
      if (muteCheckbox.checked) {
        localStorage.setItem("muted", "on");
      } else {
        localStorage.removeItem("muted");
      }
    });

    //Play the sound when the button is clicked and the item "muted" isn't present in local storage
    testButton.addEventListener("click", () => {
      if (!localStorage.getItem("muted")) {
        tapSound.play();
      }
    });
  </script>
</body>
</html>

【讨论】：