kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Added meow audio and hover feedback for button and volume control

Browse Source
This commit is contained in:
DMZTdhruv
2024-07-25 10:28:44 +05:30
parent 194120bb3f
commit 43d87a2af0
4 changed files with 124 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -249,4 +249,3 @@ $RECYCLE.BIN/
# End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux
*.mp3

BIN
web/audio/cat-meow.mp3 Normal file
View File

Binary file not shown.

44
web/index.html
View File

@@ -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>

206
web/script.js
View File

@@ -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;