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-24 23:37:50 +05:30
parent f1273e9c5f
commit bc7a219118
3 changed files with 159 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/index.html
View File

@@ -1,22 +1,22 @@
<!doctype html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>infinifi</title> <title>infinifi</title>
<link rel="preload" href="./style.css" as="style"> <link rel="preload" href="./style.css" as="style" />
<link rel="modulepreload" href="./bg.js"> <link rel="modulepreload" href="./bg.js" />
<link rel="modulepreload" href="./script.js"> <link rel="modulepreload" href="./script.js" />
<link rel="preload" href="./images/cat-0.png" as="image"> <link rel="preload" href="./images/cat-0.png" as="image" />
<link rel="preload" href="./images/eeping-cat.png" as="image"> <link rel="preload" href="./images/eeping-cat.png" as="image" />
<link rel="stylesheet" href="./style.css"> <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:card" content="summary" />
<meta name="twitter:site" content="@kennethnym"> <meta name="twitter:site" content="@kennethnym" />
<meta name="twitter:title" content="infinifi"> <meta name="twitter:title" content="infinifi" />
<meta name="twitter:description" content="infinite lo-fi beats in the background"> <meta name="twitter:description" content="infinite lo-fi beats in the background" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -31,8 +31,8 @@
<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" />
<img class="eeping-cat" src="./images/eeping-cat.png"> <img class="eeping-cat" src="./images/eeping-cat.png" />
</div> </div>
<footer> <footer>
@@ -43,7 +43,12 @@
<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
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> <script type="module" src="./bg.js"></script>
<script type="module" src="./script.js"></script> <script type="module" src="./script.js"></script>

20
web/script.js
View File

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

6
web/style.css
View File

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