added sound volume config. closes #2324

src/js/commandline-lists.js

@@ -642,6 +642,40 @@ let commandsSoundOnError = {
   ],
 };
 
+let commandsSoundVolume = {
+  title: "Sound volume...",
+  configKey: "soundVolume",
+  list: [
+    {
+      id: "setSoundVolume0.1",
+      display: "quiet",
+      configValue: "0.1",
+      exec: () => {
+        UpdateConfig.setSoundVolume("0.1");
+        Sound.playClick();
+      },
+    },
+    {
+      id: "setSoundVolume0.5",
+      display: "medium",
+      configValue: "0.5",
+      exec: () => {
+        UpdateConfig.setSoundVolume("0.5");
+        Sound.playClick();
+      },
+    },
+    {
+      id: "setSoundVolume1.0",
+      display: "loud",
+      configValue: "1.0",
+      exec: () => {
+        UpdateConfig.setSoundVolume("1.0");
+        Sound.playClick();
+      },
+    },
+  ],
+};
+
 let commandsFlipTestColors = {
   title: "Flip test colors...",
   configKey: "flipTestColors",
@@ -2466,12 +2500,6 @@ export let defaultCommands = {
       icon: "fa-hand-paper",
       subgroup: commandsStopOnError,
     },
-    {
-      id: "changeSoundOnClick",
-      display: "Sound on click...",
-      icon: "fa-volume-up",
-      subgroup: commandsSoundOnClick,
-    },
     {
       id: "changeNumbers",
       display: "Numbers...",
@@ -2606,12 +2634,24 @@ export let defaultCommands = {
       icon: "fa-exchange-alt",
       subgroup: commandsOppositeShiftMode,
     },
+    {
+      id: "changeSoundOnClick",
+      display: "Sound on click...",
+      icon: "fa-volume-up",
+      subgroup: commandsSoundOnClick,
+    },
     {
       id: "changeSoundOnError",
       display: "Sound on error...",
       icon: "fa-volume-mute",
       subgroup: commandsSoundOnError,
     },
+    {
+      id: "changeSoundVolume",
+      display: "Sound volume...",
+      icon: "fa-volume-down",
+      subgroup: commandsSoundVolume,
+    },
     {
       id: "changeFlipTestColors",
       display: "Flip test colors...",

src/js/config.js

@@ -101,6 +101,7 @@ let defaultConfig = {
   capsLockWarning: true,
   playSoundOnError: false,
   playSoundOnClick: "off",
+  soundVolume: "0.5",
   startGraphsAtZero: true,
   swapEscAndTab: false,
   showOutOfFocusWarning: true,
@@ -274,11 +275,13 @@ export function setPlaySoundOnClick(val, nosave) {
   if (!nosave) saveToLocalStorage();
 }
 
-export function togglePlaySoundOnError() {
-  config.playSoundOnError = !config.playSoundOnError;
-  if (config.playSoundOnError == undefined) {
-    config.playSoundOnError = false;
+export function setSoundVolume(val, nosave) {
+  if (val == undefined) {
+    val = "1.0";
   }
+  config.soundVolume = val;
+  Sound.setVolume(val);
+  if (!nosave) saveToLocalStorage();
 }
 
 //difficulty
@@ -1644,6 +1647,7 @@ export function apply(configObj) {
     setCapsLockWarning(configObj.capsLockWarning, true);
     setPlaySoundOnError(configObj.playSoundOnError, true);
     setPlaySoundOnClick(configObj.playSoundOnClick, true);
+    setSoundVolume(configObj.soundVolume, true);
     setStopOnError(configObj.stopOnError, true);
     setFavThemes(configObj.favThemes, true);
     setFunbox(configObj.funbox, true);

src/js/settings.js

@@ -174,6 +174,11 @@ async function initGroups() {
       groups.confidenceMode.updateButton();
     }
   );
+  groups.soundVolume = new SettingsGroup(
+    "soundVolume",
+    UpdateConfig.setSoundVolume,
+    () => {}
+  );
   groups.playSoundOnError = new SettingsGroup(
     "playSoundOnError",
     UpdateConfig.setPlaySoundOnError,

src/js/sound.js

@@ -1,5 +1,5 @@
 import Config from "./config";
-import { Howl } from "howler";
+import Howler, { Howl } from "howler";
 
 let errorSound = null;
 let clickSounds = null;
@@ -244,3 +244,7 @@ export function playError() {
   errorSound.seek(0);
   errorSound.play();
 }
+
+export function setVolume(val) {
+  Howler.Howler.volume(val);
+}

static/index.html

@@ -2906,6 +2906,36 @@
               <i class="fas fa-chevron-down"></i>
             </div>
             <div class="settingsGroup sound">
+              <div class="section soundVolume">
+                <h1>sound volume</h1>
+                <div class="text">Change the volume of the sound effects.</div>
+                <div class="buttons">
+                  <div
+                    class="button"
+                    soundVolume="0.1"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    quiet
+                  </div>
+                  <div
+                    class="button"
+                    soundVolume="0.5"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    medium
+                  </div>
+                  <div
+                    class="button"
+                    soundVolume="1.0"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    loud
+                  </div>
+                </div>
+              </div>
               <div class="section playSoundOnClick fullWidth">
                 <h1>play sound on click</h1>
                 <div class="text">