evadecker · delucis · Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025 · Apr 22, 2025
diff --git a/package.json b/package.json
@@ -23,8 +23,10 @@
     "@astrojs/sitemap": "^3.3.0",
     "@netlify/blobs": "^8.2.0",
     "@netlify/edge-functions": "^2.11.1",
+    "@types/howler": "^2.2.12",
     "astro": "^5.5.2",
     "fathom-client": "^3.7.2",
+    "howler": "^2.2.4",
     "three": "^0.174.0",
     "typescript": "^5.8.2"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Controls.astro b/src/components/Controls.astro
@@ -59,6 +59,7 @@ const { prev, next } = await getPagination(channelId);
 
 <script>
   import * as Fathom from "fathom-client";
+  import { playButtonClick } from "../sfx/button";
 
   const powerButton = document.getElementById("power");
   const screen = document.querySelector(".screen");
@@ -67,6 +68,9 @@ const { prev, next } = await getPagination(channelId);
   const menuButton = document.getElementById("menu-button");
   const channelButtons = document.querySelectorAll(".channel-button");
 
+  const buttons = document.querySelectorAll(".controls .button");
+  buttons.forEach(button => button.addEventListener('click', playButtonClick));
+
   function updateButtonStates(powerState: string) {
     if (powerState === "off") {
       menuButton?.setAttribute("disabled", "true");

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,5 @@
 ---
+import SfxPreloader from "src/sfx/SfxPreloader.astro";
 import "../styles/index.css";
 
 interface Props {
@@ -63,6 +64,7 @@ const pageTitle =
 			type="font/woff2"
 			crossorigin
 		/>
+		<SfxPreloader />
 	</head>
 	<body>
 		<slot />

diff --git a/src/sfx/SfxPreloader.astro b/src/sfx/SfxPreloader.astro
@@ -0,0 +1,5 @@
+---
+import buttonSfxSprite from "./button-sprite.mp3";
+---
+
+<link rel="preload" href={buttonSfxSprite} as="fetch" crossorigin />
diff --git a/src/sfx/button-sprite.mp3 b/src/sfx/button-sprite.mp3
diff --git a/src/sfx/button.ts b/src/sfx/button.ts
@@ -0,0 +1,36 @@
+import { Howl } from "howler";
+import sprite from "./button-sprite.mp3";
+
+/** The number of distinct button click samples stored in the sound sprite. */
+const sampleCount = 11;
+
+/** The duration of each sample in the sound sprite in milliseconds. */
+const sampleDuration = 375;
+
+/** The sprite that was most recently played. */
+let lastSampleId: string | undefined;
+
+/** Get a random ID for one of the sounds in the sound sprite. */
+const getNextSampleId = (): string => {
+  const nextSampleId = String(Math.floor(Math.random() * sampleCount));
+  // Avoid repeating the same sample as the last click.
+  if (nextSampleId === lastSampleId) return getNextSampleId();
+  lastSampleId = nextSampleId;
+  return nextSampleId;
+};
+
+/** A Howler instance that plays back button clicks. */
+const buttonSfx = new Howl({
+  src: sprite,
+  // This code tells Howler to break up the sprite file into 375ms chunks.
+  sprite: Object.fromEntries(
+    Array.from({ length: sampleCount }).map((_, index) => [
+      index,
+      [index * sampleDuration, sampleDuration],
+    ]),
+  ),
+  volume: 0.5,
+});
+
+/** Play a random plastic button click sound effect. */
+export const playButtonClick = (): number => buttonSfx.play(getNextSampleId());