sounds

public/scripts/limepot.js

@@ -37,3 +37,31 @@ function OnInput() {
   this.style.height = "auto";
   this.style.height = this.scrollHeight + "px";
 }
+
+// Sound effects
+function PlaySound(soundobj) {
+  var thissound = document.getElementById(soundobj);
+  thissound.play();
+}
+
+function StopSound(soundobj) {
+  var thissound = document.getElementById(soundobj);
+  thissound.pause();
+  thissound.currentTime = 0;
+}
+
+const audio = new Audio("/assets/sounds/ui/zapsplat_multimedia_button_click_004_68776.mp3");
+const buttons = document.querySelectorAll("button");
+const links = document.querySelectorAll("a");
+
+links.forEach(a => {
+  a.addEventListener("click", () => {
+    audio.play();
+  })
+})
+
+buttons.forEach(button => {
+  button.addEventListener("click", () => {
+    audio.play();
+  });
+});

src/components/Header.astro

@@ -3,8 +3,16 @@ import HeaderLink from "./HeaderLink.astro";
 import { SITE_TITLE } from "../consts";
 ---
 
+<!--
+    onmouseover="PlaySound('hoverSound')"
+    onmouseout="StopSound('hoverSound')" -->
+
 <nav class="menu content">
-  <button class="custom-btn btn-1" type="button" onclick="location.href='/'">
+  <button
+    class="custom-btn btn-1"
+    type="button"
+    onclick="location.href='/'"
+  >
     <span>Home</span>
   </button>
 

src/layouts/Layout.astro

@@ -15,5 +15,9 @@ import Footer from "../components/Footer.astro";
     <Footer />
     <script type="text/javascript" src="/scripts/limepot.js"></script>
     <script type="text/javascript" src="/scripts/ntfy.js"></script>
+    <audio
+    id="clickSound"
+    src="/assets/sounds/ui/zapsplat_multimedia_button_click_004_68776.mp3"
+  ></audio>
   </body>
 </html>