Add click sound effect and option to disable on settings.

static/scripts/click.js

@@ -0,0 +1,26 @@
+/*
+This script plays a sound when user clicks on the page.
+*/
+
+const click = new Audio(`${rootPrefix}static/audio/click.ogg`);
+const hover = new Audio(`${rootPrefix}static/audio/hover.ogg`);
+click.preload = "auto";
+hover.preload = "auto";
+click.volume = 0.5;
+hover.volume = 0.5;
+
+
+document.body.addEventListener("click", () => {
+    if (localStorage.getItem("disablesfx") == 'true') return;
+    
+    click.currentTime = 0;
+    click.play().catch(() => {});
+});
+
+document.querySelectorAll('a').forEach(link => {
+    link.addEventListener("mouseenter", () => {
+        if (localStorage.getItem("disablesfx") == 'true') return;
+        hover.currentTime = 0;
+        hover.play().catch(() => {});
+    })
+})

static/scripts/music.js

@@ -49,6 +49,10 @@ optionsAside.classList.add("metromenu");
             <p>${headeri18n.hideBackground}</p>
             <input id="background" type="checkbox"></input>
         </div>
+        <div class="checkbox">
+            <p>${headeri18n.disableSoundEffects}</p>
+            <input id="soundEffects" type="checkbox"></input>
+        </div>
     </div>
     `
     optionsAside.appendChild(content);
@@ -76,6 +80,12 @@ function toggleBG() {
     localStorage.setItem("bgHidden", bg.classList.contains("invisible"))
 }
 
+const disableSFX = document.querySelector("input#soundEffects");
+if (localStorage.getItem("disablesfx") === "true") disableSFX.checked = true;
+disableSFX.addEventListener("click", () => {
+    localStorage.setItem("disablesfx", disableSFX.checked)
+})
+
 const songsDrawer = document.querySelector("#songDrawer");
 const drawerSongs = [];
 const playlist = document.querySelector("#playlist");