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

wip: test with minified js

Browse Source
This commit is contained in:
Hegyi Áron Ferenc
2024-07-23 17:01:22 +02:00
parent 4b2b93176a
commit 8cc85b5580
3 changed files with 4 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
web/script.js
View File

@@ -1,129 +1 @@
const playBtn = document.getElementById("play-btn");
const catImg = document.getElementsByClassName("cat")[0];
const volumeSlider = document.getElementById("volume-slider");
const currentVolumeLabel = document.getElementById("current-volume-label");
const clickAudio = new Audio("./audio/click.wav");
const clickReleaseAudio = new Audio("./audio/click-release.wav");
const CROSSFADE_DURATION_MS = 5000;
const CROSSFADE_INTERVAL_MS = 20;
const AUDIO_DURATION_MS = 60000;
let isPlaying = false;
let isFading = false;
let currentAudio;
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;
currentAudio.play();
fadeIn();
setTimeout(() => {
fadeOut();
}, AUDIO_DURATION_MS - CROSSFADE_DURATION_MS);
}
function pauseAudio() {
currentAudio.pause();
currentAudio.volume = 0;
currentVolume = 0;
}
function fadeIn() {
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);
}
function fadeOut() {
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);
}
function animateCat() {
let current = 0;
setInterval(() => {
if (current === 3) {
current = 0;
} else {
current += 1;
}
catImg.src = `./images/cat-${current}.png`;
}, 500);
}
playBtn.onmousedown = () => {
clickAudio.play();
document.addEventListener(
"mouseup",
() => {
clickReleaseAudio.play();
},
{ once: true },
);
};
playBtn.onclick = () => {
if (isPlaying) {
pauseAudio();
} else {
playAudio();
}
};
volumeSlider.oninput = () => {
maxVolume = volumeSlider.value;
currentVolumeLabel.textContent = `${maxVolume}%`;
if (!isFading && currentAudio) {
currentAudio.volume = maxVolume / 100;
currentVolume = maxVolume;
}
};
volumeSlider.value = 100;
animateCat();
(()=>{var u=document.getElementById("play-btn"),r=document.getElementsByClassName("cat")[0],s=document.getElementById("volume-slider"),v=document.getElementById("current-volume-label"),p=new Audio("./audio/click.wav"),f=new Audio("./audio/click-release.wav"),m=5e3,a=20,A=6e4,i=!1,o=!1,e,l=100,t=0;function d(){e=new Audio(`./current.mp3?t=${Date.now()}`),e.onplay=()=>{i=!0,u.innerText="pause"},e.onpause=()=>{i=!1,t=0,u.innerText="play"},e.onended=()=>{t=0,d()},e.volume=0,e.play(),y(),setTimeout(()=>{S()},A-m)}function I(){e.pause(),e.volume=0,t=0}function y(){o=!0;let n=l/(m/a),c=setInterval(()=>{t+=n,t>=l?(clearInterval(c),t=l,o=!1):e.volume=t/100},a)}function S(){o=!0;let n=l/(m/a),c=setInterval(()=>{t-=n,t<=0?(clearInterval(c),t=0,o=!1):e.volume=t/100},a)}function g(){let n=0;setInterval(()=>{n===3?n=0:n+=1,r.src=`./images/cat-${n}.png`},500)}u.onmousedown=()=>{p.play(),document.addEventListener("mouseup",()=>{f.play()},{once:!0})};u.onclick=()=>{i?I():d()};s.oninput=()=>{l=s.value,v.textContent=`${l}%`,!o&&e&&(e.volume=l/100,t=l)};s.value=100;g();})();