2024-07-26 17:08:37 +01:00 · 2024-07-25 12:34:17 +01:00 · 2024-07-25 12:34:17 +01:00 · 2024-07-25 12:34:17 +01:00 · 2024-07-25 12:34:17 +01:00 · 2024-07-25 12:34:17 +01:00
4 changed files with 159 additions and 169 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -1,51 +1,56 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-	<head>
+  <head>
-		<meta charset="utf-8">
+    <meta charset="utf-8" />
-		<title>infinifi</title>
+    <title>infinifi</title>
-		<link rel="preload" href="./style.css" as="style">
+    <link rel="preload" href="./style.css" as="style" />
-		<link rel="modulepreload" href="./bg.js">
+    <link rel="modulepreload" href="./bg.js" />
-		<link rel="modulepreload" href="./script.js">
+    <link rel="modulepreload" href="./script.js" />
-		<link rel="preload" href="./images/cat-0.png" as="image">
+    <link rel="preload" href="./images/cat-0.png" as="image" />
-		<link rel="preload" href="./images/eeping-cat.png" as="image">
+    <link rel="preload" href="./images/eeping-cat.png" as="image" />
-		<link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./style.css" />
-		<meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="twitter:card" content="summary">
+    <meta name="twitter:card" content="summary" />
-		<meta name="twitter:site" content="@kennethnym">
+    <meta name="twitter:site" content="@kennethnym" />
-		<meta name="twitter:title" content="infinifi">
+    <meta name="twitter:title" content="infinifi" />
-		<meta name="twitter:description" content="infinite lo-fi beats in the background">
+    <meta name="twitter:description" content="infinite lo-fi beats in the background" />
-	</head>
+  </head>
-	<body>
+  <body>
-		<div class="container">
+    <div class="container">
-			<main>
+      <main>
-				<h1 class="header">infinifi</h1>
+        <h1 class="header">infinifi</h1>
-				<h2>infinite lo-fi music in the background</h2>
+        <h2>infinite lo-fi music in the background</h2>
-				<div class="button-container">
+        <div class="button-container">
-					<button id="play-btn" class="button">play</button>
+          <button id="play-btn" class="button">play</button>
-				</div>
+        </div>
-				<div class="volume-slider-container">
+        <div class="volume-slider-container">
-					<output id="current-volume-label" for="volume-slider">100%</output>
+          <output id="current-volume-label" for="volume-slider">100%</output>
-					<input id="volume-slider" type="range" min="0" max="100" step="1" />
+          <input id="volume-slider" type="range" min="0" max="100" step="1" />
-				</div>
+        </div>
-			</main>
+      </main>
-			<img class="cat" src="./images/cat-0.png">
+      <img class="cat" src="./images/cat-0.png" />
-			<img class="eeping-cat" src="./images/eeping-cat.png">
+      <img class="eeping-cat" src="./images/eeping-cat.png" />
-		</div>
+    </div>
-		<footer>
+    <footer>
-			<span>made by kennethnym &lt;3 ·&nbsp;</span>
+      <span>made by kennethnym &lt;3 ·&nbsp;</span>
-			<a href="https://github.com/kennethnym/infinifi">github</a>
+      <a href="https://github.com/kennethnym/infinifi">github</a>
-		</footer>
+    </footer>
-		<canvas id="bg"></canvas>
+    <canvas id="bg"></canvas>
-		<audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
+    <audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
-		<audio id="click-release-audio" preload="auto" src="./audio/click-release.wav"></audio>
+    <audio
      id="click-release-audio"
      preload="auto"
      src="./audio/click-release.wav"
    ></audio>
    <audio id="meow-audio" preload="auto" src="./audio/cat-meow.mp3"></audio>
-		<script type="module" src="./bg.js"></script>
+    <script type="module" src="./bg.js"></script>
-		<script type="module" src="./script.js"></script>
+    <script type="module" src="./script.js"></script>
-	</body>
+  </body>
 </html>
--- a/web/script.js
+++ b/web/script.js
@@ -4,6 +4,7 @@ const volumeSlider = document.getElementById("volume-slider");
 const currentVolumeLabel = document.getElementById("current-volume-label");
 const clickAudio = document.getElementById("click-audio");
 const clickReleaseAudio = document.getElementById("click-release-audio");
 const meowAudio = document.getElementById("meow-audio");
 const CROSSFADE_DURATION_MS = 5000;
 const CROSSFADE_INTERVAL_MS = 20;
@@ -16,139 +17,142 @@ let maxVolume = 100;
 let currentVolume = 0;
 function playAudio() {
-	// add a random query parameter at the end to prevent browser caching
+  // add a random query parameter at the end to prevent browser caching
-	currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
+  currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
-	currentAudio.onplay = () => {
+  currentAudio.onplay = () => {
-		isPlaying = true;
+    isPlaying = true;
-		playBtn.innerText = "pause";
+    playBtn.innerText = "pause";
-	};
+  };
-	currentAudio.onpause = () => {
+  currentAudio.onpause = () => {
-		isPlaying = false;
+    isPlaying = false;
-		currentVolume = 0;
+    currentVolume = 0;
-		playBtn.innerText = "play";
+    playBtn.innerText = "play";
-	};
+  };
-	currentAudio.onended = () => {
+  currentAudio.onended = () => {
-		currentVolume = 0;
+    currentVolume = 0;
-		playAudio();
+    playAudio();
-	};
+  };
-	currentAudio.volume = 0;
+  currentAudio.volume = 0;
-	currentAudio.play();
+  currentAudio.play();
-	fadeIn();
+  fadeIn();
-	setTimeout(() => {
+  setTimeout(() => {
-		fadeOut();
+    fadeOut();
-	}, AUDIO_DURATION_MS - CROSSFADE_DURATION_MS);
+  }, AUDIO_DURATION_MS - CROSSFADE_DURATION_MS);
 }
 function pauseAudio() {
-	currentAudio.pause();
+  currentAudio.pause();
-	currentAudio.volume = 0;
+  currentAudio.volume = 0;
-	currentVolume = 0;
+  currentVolume = 0;
 }
 function fadeIn() {
-	isFading = true;
+  isFading = true;
-	// volume ranges from 0 to 100, this determines by how much the volume number
+  // volume ranges from 0 to 100, this determines by how much the volume number
-	// should be incremented at every step of the fade in
+  // should be incremented at every step of the fade in
-	const volumeStep =
+  const volumeStep = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
-		maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
+  const handle = setInterval(() => {
-	const handle = setInterval(() => {
+    currentVolume += volumeStep;
-		currentVolume += volumeStep;
+    if (currentVolume >= maxVolume) {
-		if (currentVolume >= maxVolume) {
+      clearInterval(handle);
-			clearInterval(handle);
+      currentVolume = maxVolume;
-			currentVolume = maxVolume;
+      isFading = false;
-			isFading = false;
+    } else {
-		} else {
+      currentAudio.volume = currentVolume / 100;
-			currentAudio.volume = currentVolume / 100;
+    }
-		}
+  }, CROSSFADE_INTERVAL_MS);
 	}, CROSSFADE_INTERVAL_MS);
 }
 function fadeOut() {
-	isFading = true;
+  isFading = true;
-	// volume ranges from 0 to 100, this determines by how much the volume number
+  // volume ranges from 0 to 100, this determines by how much the volume number
-	// should be decremented at every step of the fade out
+  // should be decremented at every step of the fade out
-	const volumeStep =
+  const volumeStep = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
-		maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
+  const handle = setInterval(() => {
-	const handle = setInterval(() => {
+    currentVolume -= volumeStep;
-		currentVolume -= volumeStep;
+    if (currentVolume <= 0) {
-		if (currentVolume <= 0) {
+      clearInterval(handle);
-			clearInterval(handle);
+      currentVolume = 0;
-			currentVolume = 0;
+      isFading = false;
-			isFading = false;
+    } else {
-		} else {
+      currentAudio.volume = currentVolume / 100;
-			currentAudio.volume = currentVolume / 100;
+    }
-		}
+  }, CROSSFADE_INTERVAL_MS);
 	}, CROSSFADE_INTERVAL_MS);
 }
 function animateCat() {
-	let current = 0;
+  let current = 0;
-	setInterval(() => {
+  setInterval(() => {
-		if (current === 3) {
+    if (current === 3) {
-			current = 0;
+      current = 0;
-		} else {
+    } else {
-			current += 1;
+      current += 1;
-		}
+    }
-		catImg.src = `./images/cat-${current}.png`;
+    catImg.src = `./images/cat-${current}.png`;
-	}, 500);
+  }, 500);
 }
 /**
 * Allow audio to be played/paused using the space bar
 */
 function enableSpaceBarControl() {
-	document.addEventListener("keydown", (event) => {
+  document.addEventListener("keydown", event => {
-		if (event.code === "Space") {
+    if (event.code === "Space") {
-			playBtn.classList.add("button-active");
+      playBtn.classList.add("button-active");
-			playBtn.dispatchEvent(new MouseEvent("mousedown"));
+      playBtn.dispatchEvent(new MouseEvent("mousedown"));
-			clickAudio.play();
+      clickAudio.play();
-		}
+    }
-	});
+  });
-	document.addEventListener("keyup", (event) => {
+  document.addEventListener("keyup", event => {
-		if (event.code === "Space") {
+    if (event.code === "Space") {
-			playBtn.classList.remove("button-active");
+      playBtn.classList.remove("button-active");
-			clickReleaseAudio.play();
+      clickReleaseAudio.play();
-		}
+    }
-	});
+  });
-	document.addEventListener("keypress", (event) => {
+  document.addEventListener("keypress", event => {
-		if (event.code === "Space") {
+    if (event.code === "Space") {
-			playBtn.click();
+      playBtn.click();
-		}
+    }
-	});
+  });
 }
 playBtn.onmousedown = () => {
-	clickAudio.play();
+  clickAudio.play();
-	document.addEventListener(
+  document.addEventListener(
-		"mouseup",
+    "mouseup",
-		() => {
+    () => {
-			clickReleaseAudio.play();
+      clickReleaseAudio.play();
-		},
+    },
-		{ once: true },
+    { once: true }
-	);
+  );
 };
 catImg.addEventListener("mouseover", () => {
  meowAudio.play();
 });
 playBtn.onclick = () => {
-	if (isPlaying) {
+  if (isPlaying) {
-		pauseAudio();
+    pauseAudio();
-	} else {
+  } else {
-		playAudio();
+    playAudio();
-	}
+  }
 };
 volumeSlider.oninput = () => {
-	maxVolume = volumeSlider.value;
+  maxVolume = volumeSlider.value;
-	currentVolumeLabel.textContent = `${maxVolume}%`;
+  currentVolumeLabel.textContent = `${maxVolume}%`;
-	if (!isFading && currentAudio) {
+  if (!isFading && currentAudio) {
-		currentAudio.volume = maxVolume / 100;
+    currentAudio.volume = maxVolume / 100;
-		currentVolume = maxVolume;
+    currentVolume = maxVolume;
-	}
+  }
-	clickAudio.volume = volumeSlider.value / 100;
+  clickAudio.volume = volumeSlider.value / 100;
-	clickReleaseAudio.volume = volumeSlider.value / 100;
+  clickReleaseAudio.volume = volumeSlider.value / 100;
  meowAudio.volume = volumeSlider.value / 100;
 };
 volumeSlider.value = 100;
--- a/web/style.css
+++ b/web/style.css
@@ -26,6 +26,7 @@
 html,
 body {
  width: 100%;
  overflow: hidden;
 }
 body {
@@ -151,6 +152,10 @@ a {
  display: flex;
 }
 .button-container .button {
  cursor: pointer;
 }
 .volume-slider-container {
  position: absolute;
  top: 0;
@@ -174,6 +179,7 @@ a {
    appearance: none;
    border: 2px solid var(--text);
    background-color: var(--base);
    cursor: col-resize;
  }
  input[type="range"]::-webkit-slider-runnable-track {