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="modulepreload" href="./bg.js" />
-    <link rel="modulepreload" href="./script.js" />
-    <link rel="preload" href="./images/cat-0.png" as="image" />
-    <link rel="preload" href="./images/eeping-cat.png" as="image" />
-    <link rel="stylesheet" href="./style.css" />
+    <link rel="preload" href="./style.css" as="style">
+    <link rel="modulepreload" href="./bg.js">
+    <link rel="modulepreload" href="./script.js">
+    <link rel="preload" href="./images/cat-0.png" as="image">
+    <link rel="preload" href="./images/eeping-cat.png" as="image">
+    <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:site" content="@kennethnym" />
-    <meta name="twitter:title" content="infinifi" />
-    <meta name="twitter:description" content="infinite lo-fi beats in the background" />
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@kennethnym">
+    <meta name="twitter:title" content="infinifi">
+    <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="eeping-cat" src="./images/eeping-cat.png" />
+      <img class="cat" src="./images/cat-0.png">
+      <img class="eeping-cat" src="./images/eeping-cat.png">
    </div>

-		<footer>
-			<span>made by kennethnym &lt;3 ·&nbsp;</span>
-			<a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
-		</footer>
+    <footer>
+      <span>made by kennethnym &lt;3 ·&nbsp;</span>
+      <a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
+    </footer>

    <canvas id="bg"></canvas>

    <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>
--- 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
-  currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
-  currentAudio.onplay = () => {
-    isPlaying = true;
-    playBtn.innerText = "pause";
-  };
-  currentAudio.onpause = () => {
-    isPlaying = false;
-    currentVolume = 0;
-    playBtn.innerText = "play";
-  };
-  currentAudio.onended = () => {
-    currentVolume = 0;
-    playAudio();
-  };
-  currentAudio.volume = 0;
+	// add a random query parameter at the end to prevent browser caching
+	currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
+	currentAudio.onplay = () => {
+		isPlaying = true;
+		playBtn.innerText = "pause";
+	};
+	currentAudio.onpause = () => {
+		isPlaying = false;
+		currentVolume = 0;
+		playBtn.innerText = "play";
+	};
+	currentAudio.onended = () => {
+		currentVolume = 0;
+		playAudio();
+	};
+	currentAudio.volume = 0;

-  currentAudio.play();
+	currentAudio.play();

-  fadeIn();
-  setTimeout(() => {
-    fadeOut();
-  }, AUDIO_DURATION_MS - CROSSFADE_DURATION_MS);
+	fadeIn();
+	setTimeout(() => {
+		fadeOut();
+	}, AUDIO_DURATION_MS - CROSSFADE_DURATION_MS);
 }

 function pauseAudio() {
-  currentAudio.pause();
-  currentAudio.volume = 0;
-  currentVolume = 0;
+	currentAudio.pause();
+	currentAudio.volume = 0;
+	currentVolume = 0;
 }

 function fadeIn() {
-  isFading = true;
+	isFading = true;

-  // volume ranges from 0 to 100, this determines by how much the volume number
-  // should be incremented at every step of the fade in
-  const volumeStep = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
-  const handle = setInterval(() => {
-    currentVolume += volumeStep;
-    if (currentVolume >= maxVolume) {
-      clearInterval(handle);
-      currentVolume = maxVolume;
-      isFading = false;
-    } else {
-      currentAudio.volume = currentVolume / 100;
-    }
-  }, CROSSFADE_INTERVAL_MS);
+	// volume ranges from 0 to 100, this determines by how much the volume number
+	// should be incremented at every step of the fade in
+	const volumeStep =
+		maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
+	const handle = setInterval(() => {
+		currentVolume += volumeStep;
+		if (currentVolume >= maxVolume) {
+			clearInterval(handle);
+			currentVolume = maxVolume;
+			isFading = false;
+		} else {
+			currentAudio.volume = currentVolume / 100;
+		}
+	}, CROSSFADE_INTERVAL_MS);
 }

 function fadeOut() {
-  isFading = true;
+	isFading = true;

-  // volume ranges from 0 to 100, this determines by how much the volume number
-  // should be decremented at every step of the fade out
-  const volumeStep = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
-  const handle = setInterval(() => {
-    currentVolume -= volumeStep;
-    if (currentVolume <= 0) {
-      clearInterval(handle);
-      currentVolume = 0;
-      isFading = false;
-    } else {
-      currentAudio.volume = currentVolume / 100;
-    }
-  }, CROSSFADE_INTERVAL_MS);
+	// volume ranges from 0 to 100, this determines by how much the volume number
+	// should be decremented at every step of the fade out
+	const volumeStep =
+		maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
+	const handle = setInterval(() => {
+		currentVolume -= volumeStep;
+		if (currentVolume <= 0) {
+			clearInterval(handle);
+			currentVolume = 0;
+			isFading = false;
+		} else {
+			currentAudio.volume = currentVolume / 100;
+		}
+	}, CROSSFADE_INTERVAL_MS);
 }

 function animateCat() {
-  let current = 0;
-  setInterval(() => {
-    if (current === 3) {
-      current = 0;
-    } else {
-      current += 1;
-    }
-    catImg.src = `./images/cat-${current}.png`;
-  }, 500);
+	let current = 0;
+	setInterval(() => {
+		if (current === 3) {
+			current = 0;
+		} else {
+			current += 1;
+		}
+		catImg.src = `./images/cat-${current}.png`;
+	}, 500);
 }

 /**
 * Allow audio to be played/paused using the space bar
 */
 function enableSpaceBarControl() {
-  document.addEventListener("keydown", event => {
-    if (event.code === "Space") {
-      playBtn.classList.add("button-active");
-      playBtn.dispatchEvent(new MouseEvent("mousedown"));
-      clickAudio.play();
-    }
-  });
-  document.addEventListener("keyup", event => {
-    if (event.code === "Space") {
-      playBtn.classList.remove("button-active");
-      clickReleaseAudio.play();
-    }
-  });
-  document.addEventListener("keypress", event => {
-    if (event.code === "Space") {
-      playBtn.click();
-    }
-  });
+	document.addEventListener("keydown", (event) => {
+		if (event.code === "Space") {
+			playBtn.classList.add("button-active");
+			playBtn.dispatchEvent(new MouseEvent("mousedown"));
+			clickAudio.play();
+		}
+	});
+	document.addEventListener("keyup", (event) => {
+		if (event.code === "Space") {
+			playBtn.classList.remove("button-active");
+			clickReleaseAudio.play();
+		}
+	});
+	document.addEventListener("keypress", (event) => {
+		if (event.code === "Space") {
+			playBtn.click();
+		}
+	});
 }

 playBtn.onmousedown = () => {
-  clickAudio.play();
-  document.addEventListener(
-    "mouseup",
-    () => {
-      clickReleaseAudio.play();
-    },
-    { once: true }
-  );
+	clickAudio.play();
+	document.addEventListener(
+		"mouseup",
+		() => {
+			clickReleaseAudio.play();
+		},
+		{ once: true },
+	);
 };

 catImg.addEventListener("mouseover", () => {
-  meowAudio.play();
+	meowAudio.play();
 });

 playBtn.onclick = () => {
-  if (isPlaying) {
-    pauseAudio();
-  } else {
-    playAudio();
-  }
+	if (isPlaying) {
+		pauseAudio();
+	} else {
+		playAudio();
+	}
 };

 volumeSlider.oninput = () => {
-  maxVolume = volumeSlider.value;
-  currentVolumeLabel.textContent = `${maxVolume}%`;
-  if (!isFading && currentAudio) {
-    currentAudio.volume = maxVolume / 100;
-    currentVolume = maxVolume;
-  }
-  clickAudio.volume = volumeSlider.value / 100;
-  clickReleaseAudio.volume = volumeSlider.value / 100;
-  meowAudio.volume = volumeSlider.value / 100;
+	maxVolume = volumeSlider.value;
+	currentVolumeLabel.textContent = `${maxVolume}%`;
+	if (!isFading && currentAudio) {
+		currentAudio.volume = maxVolume / 100;
+		currentVolume = maxVolume;
+	}
+	clickAudio.volume = volumeSlider.value / 100;
+	clickReleaseAudio.volume = volumeSlider.value / 100;
+	meowAudio.volume = volumeSlider.value / 100;
 };

 volumeSlider.value = 100;