diff --git a/.gitignore b/.gitignore index 0b3aa71..2e60826 100644 --- a/.gitignore +++ b/.gitignore @@ -249,4 +249,3 @@ $RECYCLE.BIN/ # End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux -*.mp3 diff --git a/web/audio/cat-meow.mp3 b/web/audio/cat-meow.mp3 new file mode 100644 index 0000000..f76e72c Binary files /dev/null and b/web/audio/cat-meow.mp3 differ diff --git a/web/index.html b/web/index.html index 97a6c82..0691e29 100644 --- a/web/index.html +++ b/web/index.html @@ -1,7 +1,8 @@ - + + infinifi @@ -12,12 +13,12 @@ - +
@@ -28,7 +29,7 @@
100% - +
@@ -37,13 +38,14 @@ + diff --git a/web/script.js b/web/script.js index c1a49da..8e1af08 100644 --- a/web/script.js +++ b/web/script.js @@ -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; diff --git a/web/style.css b/web/style.css index f81d752..537ec54 100644 --- a/web/style.css +++ b/web/style.css @@ -290,4 +290,4 @@ input[type="range"]::-ms-fill-upper { .button:after { opacity: 0.5; } -} +} \ No newline at end of file