diff --git a/web/index.html b/web/index.html index c44a9ca..c1f0d7d 100644 --- a/web/index.html +++ b/web/index.html @@ -1,51 +1,56 @@ - + - - - infinifi + + + infinifi - - - - - - + + + + + + - + - - - - - - -
-
-

infinifi

-

infinite lo-fi music in the background

-
- -
-
- 100% - -
-
- - -
+ + + + + + +
+
+

infinifi

+

infinite lo-fi music in the background

+
+ +
+
+ 100% + +
+
+ + +
- + - + - - + + + - - - + + + diff --git a/web/script.js b/web/script.js index c1a49da..17df16a 100644 --- 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 - 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(); +}); + 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; + 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; diff --git a/web/style.css b/web/style.css index f81d752..2eff662 100644 --- 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 {