I added a meow sound for cat and some fixed and added cursor for volume #7
@@ -1,22 +1,22 @@
|
||||
|
|
||||
<!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)
|
||||
<!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)
|
||||
<html>
|
||||
<head>
|
||||
<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)
|
||||
<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)
|
||||
<title>infinifi</title>
|
||||
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
|
||||
<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)
|
||||
<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)
|
||||
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
</head>
|
||||
<body>
|
||||
<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" />
|
||||
</div>
|
||||
</main>
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
<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)
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
|
||||
<audio id="click-release-audio" preload="auto" src="./audio/click-release.wav"></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
|
||||
|
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="./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 clickAudio = document.getElementById("click-audio");
|
||||
const clickReleaseAudio = document.getElementById("click-release-audio");
|
||||
const meowAudio = document.getElementById("meow-audio");
|
||||
|
||||
const CROSSFADE_DURATION_MS = 5000;
|
||||
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
|
||||
// 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,8 +71,7 @@ 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) {
|
||||
@@ -101,20 +100,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();
|
||||
}
|
||||
@@ -128,10 +127,14 @@ playBtn.onmousedown = () => {
|
||||
() => {
|
||||
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 = () => {
|
||||
if (isPlaying) {
|
||||
pauseAudio();
|
||||
@@ -149,6 +152,7 @@ volumeSlider.oninput = () => {
|
||||
}
|
||||
clickAudio.volume = volumeSlider.value / 100;
|
||||
clickReleaseAudio.volume = volumeSlider.value / 100;
|
||||
meowAudio.volume = volumeSlider.value / 100;
|
||||
};
|
||||
|
||||
volumeSlider.value = 100;
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -151,6 +152,10 @@ a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-container .button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-slider-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -174,6 +179,7 @@ a {
|
||||
appearance: none;
|
||||
border: 2px solid var(--text);
|
||||
background-color: var(--base);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
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)