diff --git a/.gitignore b/.gitignore
index 0b3aa71..2e60826 100644
--- a/.gitignore
+++ b/.gitignore
@@ -249,4 +249,3 @@ $RECYCLE.BIN/
# End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux
-*.mp3
diff --git a/web/audio/cat-meow.mp3 b/web/audio/cat-meow.mp3
new file mode 100644
index 0000000..f76e72c
Binary files /dev/null and b/web/audio/cat-meow.mp3 differ
diff --git a/web/index.html b/web/index.html
index 8118309..7ddf23c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,22 +1,22 @@
-
+
infinifi
-
-
-
-
-
-
+
+
+
+
+
+
-
+
-
-
-
-
+
+
+
+
@@ -28,26 +28,22 @@
-
+
- 
- 
+
+
-
+
-
+
diff --git a/web/script.js b/web/script.js
index 17df16a..7816646 100644
--- 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;