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.

36
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,11 +28,11 @@
</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>
@@ -43,11 +43,7 @@
<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>

14
web/script.js
View File

@@ -53,7 +53,8 @@ function fadeIn() {
// 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 volumeStep =
maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
const handle = setInterval(() => {
currentVolume += volumeStep;
if (currentVolume >= maxVolume) {
@@ -71,7 +72,8 @@ function fadeOut() {
// 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 volumeStep =
maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
const handle = setInterval(() => {
currentVolume -= volumeStep;
if (currentVolume <= 0) {
@@ -100,20 +102,20 @@ function animateCat() {
* Allow audio to be played/paused using the space bar
*/
function enableSpaceBarControl() {
document.addEventListener("keydown", event => {
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
playBtn.classList.add("button-active");
playBtn.dispatchEvent(new MouseEvent("mousedown"));
clickAudio.play();
}
});
document.addEventListener("keyup", event => {
document.addEventListener("keyup", (event) => {
if (event.code === "Space") {
playBtn.classList.remove("button-active");
clickReleaseAudio.play();
}
});
document.addEventListener("keypress", event => {
document.addEventListener("keypress", (event) => {
if (event.code === "Space") {
playBtn.click();
}
@@ -127,7 +129,7 @@ playBtn.onmousedown = () => {
() => {
clickReleaseAudio.play();
},
{ once: true }
{ once: true },
);
};