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
5 changed files with 55 additions and 43 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -249,4 +249,3 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux
 *.mp3
--- a/web/audio/cat-meow.mp3
+++ b/web/audio/cat-meow.mp3
--- a/web/index.html
+++ b/web/index.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
    <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>
  <body>
    <div class="container">
@@ -28,26 +28,22 @@
        </div>
        <div class="volume-slider-container">
          <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>
      </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>
-		<footer>
+    <footer>
-			<span>made by kennethnym &lt;3 ·&nbsp;</span>
+      <span>made by kennethnym &lt;3 ·&nbsp;</span>
-			<a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
+      <a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
-		</footer>
+    </footer>
    <canvas id="bg"></canvas>
    <audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
-    <audio
+    <audio id="click-release-audio" preload="auto" src="./audio/click-release.wav"></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>
--- a/web/script.js
+++ b/web/script.js
@@ -17,142 +17,144 @@ 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 = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
+	const volumeStep =
-  const handle = setInterval(() => {
+		maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
-    currentVolume += volumeStep;
+	const handle = setInterval(() => {
-    if (currentVolume >= maxVolume) {
+		currentVolume += volumeStep;
-      clearInterval(handle);
+		if (currentVolume >= maxVolume) {
-      currentVolume = maxVolume;
+			clearInterval(handle);
-      isFading = false;
+			currentVolume = maxVolume;
-    } else {
+			isFading = false;
-      currentAudio.volume = currentVolume / 100;
+		} else {
-    }
+			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 = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
+	const volumeStep =
-  const handle = setInterval(() => {
+		maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
-    currentVolume -= volumeStep;
+	const handle = setInterval(() => {
-    if (currentVolume <= 0) {
+		currentVolume -= volumeStep;
-      clearInterval(handle);
+		if (currentVolume <= 0) {
-      currentVolume = 0;
+			clearInterval(handle);
-      isFading = false;
+			currentVolume = 0;
-    } else {
+			isFading = false;
-      currentAudio.volume = currentVolume / 100;
+		} else {
-    }
+			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();
+	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;
+	meowAudio.volume = volumeSlider.value / 100;
 };
 volumeSlider.value = 100;
`@@ -249,4 +249,3 @@ $RECYCLE.BIN/`

	`# End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux`	`# End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux`

	`*.mp3`