I added a meow sound for cat and some fixed and added cursor for volume #7
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
@@ -1,7 +1,8 @@
|
||||
|
|
||||
<!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)
|
||||
<title>infinifi</title>
|
||||
|
||||
<link rel="preload" href="./style.css" as="style">
|
||||
@@ -12,12 +13,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)
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
|
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)
|
||||
<body>
|
||||
<div class="container">
|
||||
<main>
|
||||
@@ -28,7 +29,7 @@
|
||||
|
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)
|
||||
</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" />
|
||||
|
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">
|
||||
|
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>
|
||||
</main>
|
||||
<img class="cat" src="./images/cat-0.png">
|
||||
@@ -37,13 +38,14 @@
|
||||
|
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)
|
||||
|
||||
<footer>
|
||||
<span>made by kennethnym <3 · </span>
|
||||
<a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
|
||||
|
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)
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/kennethnym/infinifi">github</a>
|
||||
|
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)
|
||||
</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="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;
|
||||
@@ -132,6 +133,11 @@ playBtn.onmousedown = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Cat audio sound function
|
||||
catImg.onmousedown = () => {
|
||||
meowAudio.play();
|
||||
};
|
||||
|
||||
playBtn.onclick = () => {
|
||||
if (isPlaying) {
|
||||
pauseAudio();
|
||||
@@ -149,6 +155,7 @@ volumeSlider.oninput = () => {
|
||||
}
|
||||
clickAudio.volume = volumeSlider.value / 100;
|
||||
clickReleaseAudio.volume = volumeSlider.value / 100;
|
||||
meowAudio.volume = volumeSlider.value / 100;
|
||||
};
|
||||
|
||||
volumeSlider.value = 100;
|
||||
|
||||
@@ -290,4 +290,4 @@ input[type="range"]::-ms-fill-upper {
|
||||
.button:after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
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)