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

Merge pull request #7 from DMZTdhruv/main

Browse Source 
feat: add meow sound when clicking on the cat :3
This commit is contained in:
Kenneth
2024-07-26 17:08:36 +01:00
committed by GitHub
parent 9869c3524e 406513eff9
commit eae55aeb94
5 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -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
View File

Binary file not shown.

10
web/index.html
View File

@@ -1,7 +1,8 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>infinifi</title>
<link rel="preload" href="./style.css" as="style">
@@ -12,12 +13,12 @@
<link rel="stylesheet" href="./style.css">
<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">
</head>
<body>
<div class="container">
<main>
@@ -28,7 +29,7 @@
</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">
@@ -37,13 +38,14 @@
<footer>
<span>made by kennethnym &lt;3 ·&nbsp;</span>
<a target="_blank" href="https://github.com/kennethnym/infinifi">github</a>
<a target="_blank" rel="noopener noreferrer" 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="meow-audio" preload="auto" src="./audio/cat-meow.mp3"></audio>
<script type="module" src="./bg.js"></script>
<script type="module" src="./script.js"></script>

7
web/script.js
View File

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

2
web/style.css
View File

@@ -290,4 +290,4 @@ input[type="range"]::-ms-fill-upper {
.button:after {
opacity: 0.5;
}
}
}