From 4a4c2821013b85ba78951bed83a97701a8ded829 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 23 Jul 2024 16:45:37 +0100 Subject: [PATCH] feat: allow play/pause with space bar --- web/script.js | 25 +++++++++++++++++++++++++ web/style.css | 2 ++ 2 files changed, 27 insertions(+) diff --git a/web/script.js b/web/script.js index 03ee6be..c19e933 100644 --- a/web/script.js +++ b/web/script.js @@ -97,6 +97,30 @@ function animateCat() { }, 500); } +/** + * Allow audio to be played/paused using the space bar + */ +function enableSpaceBarControl() { + document.addEventListener("keydown", (event) => { + if (event.code === "Space") { + playBtn.classList.add("button-active"); + playBtn.dispatchEvent(new MouseEvent("mousedown")); + clickAudio.play(); + } + }); + document.addEventListener("keyup", (event) => { + if (event.code === "Space") { + playBtn.classList.remove("button-active"); + clickReleaseAudio.play(); + } + }); + document.addEventListener("keypress", (event) => { + if (event.code === "Space") { + playBtn.click(); + } + }); +} + playBtn.onmousedown = () => { clickAudio.play(); document.addEventListener( @@ -127,3 +151,4 @@ volumeSlider.oninput = () => { volumeSlider.value = 100; animateCat(); +enableSpaceBarControl(); diff --git a/web/style.css b/web/style.css index fc38ecc..689c975 100644 --- a/web/style.css +++ b/web/style.css @@ -243,12 +243,14 @@ input[type="range"]::-ms-fill-upper { } } +.button.button-active, .button:active { background: var(--text) !important; color: var(--base); transform: translate(4px, 4px); } +.button.button-active::after, .button:active::after { content: none; }