I added a meow sound for cat and some fixed and added cursor for volume #7
@@ -1,22 +1,22 @@
|
|||||||
|
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<title>infinifi</title>
|
<title>infinifi</title>
|
||||||
|
|
||||||
<link rel="preload" href="./style.css" as="style">
|
<link rel="preload" href="./style.css" as="style" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<link rel="modulepreload" href="./bg.js">
|
<link rel="modulepreload" href="./bg.js" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<link rel="modulepreload" href="./script.js">
|
<link rel="modulepreload" href="./script.js" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<link rel="preload" href="./images/cat-0.png" as="image">
|
<link rel="preload" href="./images/cat-0.png" as="image" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<link rel="preload" href="./images/eeping-cat.png" as="image">
|
<link rel="preload" href="./images/eeping-cat.png" as="image" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="./style.css" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
|
||||||
<meta name="twitter:card" content="summary">
|
<meta name="twitter:card" content="summary" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<meta name="twitter:site" content="@kennethnym">
|
<meta name="twitter:site" content="@kennethnym" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<meta name="twitter:title" content="infinifi">
|
<meta name="twitter:title" content="infinifi" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<meta name="twitter:description" content="infinite lo-fi beats in the background">
|
<meta name="twitter:description" content="infinite lo-fi beats in the background" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -31,8 +31,8 @@
|
|||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<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" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<img class="eeping-cat" src="./images/eeping-cat.png">
|
<img class="eeping-cat" src="./images/eeping-cat.png" />
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
@@ -43,7 +43,12 @@
|
|||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
<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
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
id="click-release-audio"
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
preload="auto"
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
src="./audio/click-release.wav"
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
></audio>
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
<audio id="meow-audio" preload="auto" src="./audio/cat-meow.mp3"></audio>
|
||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
|
|
||||||
<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>
|
||||||
|
|||||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
|||||||
@@ -4,6 +4,7 @@ const volumeSlider = document.getElementById("volume-slider");
|
|||||||
const currentVolumeLabel = document.getElementById("current-volume-label");
|
const currentVolumeLabel = document.getElementById("current-volume-label");
|
||||||
const clickAudio = document.getElementById("click-audio");
|
const clickAudio = document.getElementById("click-audio");
|
||||||
const clickReleaseAudio = document.getElementById("click-release-audio");
|
const clickReleaseAudio = document.getElementById("click-release-audio");
|
||||||
|
const meowAudio = document.getElementById("meow-audio");
|
||||||
|
|
||||||
const CROSSFADE_DURATION_MS = 5000;
|
const CROSSFADE_DURATION_MS = 5000;
|
||||||
const CROSSFADE_INTERVAL_MS = 20;
|
const CROSSFADE_INTERVAL_MS = 20;
|
||||||
@@ -52,8 +53,7 @@ function fadeIn() {
|
|||||||
|
|
||||||
// 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) {
|
||||||
@@ -71,8 +71,7 @@ function fadeOut() {
|
|||||||
|
|
||||||
// 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) {
|
||||||
@@ -101,20 +100,20 @@ function animateCat() {
|
|||||||
* Allow audio to be played/paused using the space bar
|
* Allow audio to be played/paused using the space bar
|
||||||
*/
|
*/
|
||||||
function enableSpaceBarControl() {
|
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();
|
||||||
}
|
}
|
||||||
@@ -128,10 +127,14 @@ playBtn.onmousedown = () => {
|
|||||||
() => {
|
() => {
|
||||||
clickReleaseAudio.play();
|
clickReleaseAudio.play();
|
||||||
},
|
},
|
||||||
{ once: true },
|
{ once: true }
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
- this is a very very cute interaction 🥺. i think `mousedown` will make it even better as it will feel like ur petting the cat!!
- to align with the rest of the code, prefer using catImg.onmouseenter instead of `addEventListener` (no particular reason why i preferred one over the other but `onxxx` was what i used at the beginning so i stuck with it)
|
|||||||
|
|
||||||
|
catImg.addEventListener("mouseover", () => {
|
||||||
|
meowAudio.play();
|
||||||
|
});
|
||||||
|
|
||||||
playBtn.onclick = () => {
|
playBtn.onclick = () => {
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
pauseAudio();
|
pauseAudio();
|
||||||
@@ -149,6 +152,7 @@ volumeSlider.oninput = () => {
|
|||||||
}
|
}
|
||||||
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;
|
volumeSlider.value = 100;
|
||||||
|
|||||||
@@ -26,6 +26,7 @@
|
|||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@@ -151,6 +152,10 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-container .button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.volume-slider-container {
|
.volume-slider-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -174,6 +179,7 @@ a {
|
|||||||
appearance: none;
|
appearance: none;
|
||||||
border: 2px solid var(--text);
|
border: 2px solid var(--text);
|
||||||
background-color: var(--base);
|
background-color: var(--base);
|
||||||
|
cursor: col-resize;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-runnable-track {
|
input[type="range"]::-webkit-slider-runnable-track {
|
||||||
|
|||||||
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)