feat: persist volume level across reloads

web/index.html

@@ -32,7 +32,7 @@
 
 				<div class="status-bar">
 					<p id="listener-count">0 person tuned in</p>
-					<div class="volume-slider-container">
+					<div id="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" />
 					</div>

web/script.js

@@ -1,6 +1,7 @@
 const CROSSFADE_DURATION_MS = 5000;
 const CROSSFADE_INTERVAL_MS = 20;
 const AUDIO_DURATION_MS = 60000;
+const SAVE_VOLUME_TIMEOUT_MS = 200;
 
 const playBtn = document.getElementById("play-btn");
 const catImg = document.getElementById("cat");
@@ -17,6 +18,7 @@ let isFading = false;
 let currentAudio;
 let maxVolume = 100;
 let currentVolume = 0;
+let saveVolumeTimeout = null;
 let ws = connectToWebSocket();
 
 function playAudio() {
@@ -156,6 +158,37 @@ function connectToWebSocket() {
 	return ws;
 }
 
+function changeVolume(volume) {
+	maxVolume = volume;
+	const v = maxVolume / 100;
+
+	currentVolumeLabel.textContent = `${maxVolume}%`;
+
+	if (!isFading && currentAudio) {
+		currentAudio.volume = v;
+		currentVolume = maxVolume;
+	}
+
+	clickAudio.volume = v;
+	clickReleaseAudio.volume = v;
+	meowAudio.volume = v;
+}
+
+function loadInitialVolume() {
+	const savedVolume = localStorage.getItem("volume");
+	let volume = 100;
+	if (savedVolume) {
+		volume = Number.parseInt(savedVolume);
+		if (Number.isNaN(volume)) {
+			volume = 100;
+		}
+	}
+	volumeSlider.value = volume;
+	changeVolume(volume);
+
+	document.getElementById("volume-slider-container").style.display = "flex";
+}
+
 playBtn.onmousedown = () => {
 	clickAudio.play();
 	document.addEventListener(
@@ -167,7 +200,6 @@ playBtn.onmousedown = () => {
 	);
 };
 
-// Cat audio sound function
 catImg.onmousedown = () => {
 	meowAudio.play();
 };
@@ -181,15 +213,14 @@ playBtn.onclick = () => {
 };
 
 volumeSlider.oninput = () => {
-	maxVolume = volumeSlider.value;
+	const volume = volumeSlider.value;
-	currentVolumeLabel.textContent = `${maxVolume}%`;
+	changeVolume(volume);
-	if (!isFading && currentAudio) {
+	if (saveVolumeTimeout) {
-		currentAudio.volume = maxVolume / 100;
+		clearTimeout(saveVolumeTimeout);
-		currentVolume = maxVolume;
 	}
-	clickAudio.volume = volumeSlider.value / 100;
+	saveVolumeTimeout = setTimeout(() => {
-	clickReleaseAudio.volume = volumeSlider.value / 100;
+		localStorage.setItem("volume", `${volume}`);
-	meowAudio.volume = volumeSlider.value / 100;
+	}, SAVE_VOLUME_TIMEOUT_MS);
 };
 volumeSlider.value = 100;
 
@@ -210,5 +241,6 @@ window.addEventListener("online", () => {
 	ws = connectToWebSocket();
 });
 
+loadInitialVolume();
 animateCat();
 enableSpaceBarControl();

web/style.css

@@ -149,13 +149,13 @@ a {
   display: flex;
 }
 
-.volume-slider-container {
+#volume-slider-container {
-  display: flex;
+  display: none;
   justify-content: start;
   align-items: center;
 }
 
-.volume-slider-container > output {
+#volume-slider-container > output {
   color: var(--text);
   margin-right: 1rem;
 }