Added meow audio and hover feedback for button and volume control
This commit is contained in:
DMZTdhruv
1
.gitignore
vendored
1
.gitignore
vendored
@@ -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
BIN
web/audio/cat-meow.mp3
Normal file
Binary file not shown.
@@ -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 <3 · </span>
|
||||
<a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
|
||||
</footer>
|
||||
<footer>
|
||||
<span>made by kennethnym <3 · </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
206
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;
|
||||
|
||||
Reference in New Issue
Block a user