frontend/src/lib/components/player/VolumeControl.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
+
+	function handleVolumeChange(event: Event) {
+		const target = event.currentTarget as HTMLInputElement;
+		const newVolume = Number(target.value);
+		player.setVolume(newVolume);
+	}
 </script>
 
 <div class="flex items-center justify-end gap-3.5">
@@ -8,7 +14,7 @@
 		min="0"
 		max="100"
 		value={player.volume}
-		oninput={(event) => player.setVolume(Number(event.currentTarget.value))}
+		oninput={handleVolumeChange}
 		aria-label="Volumen"
 		class="mf-volume"
 		style="background:linear-gradient(to right, var(--mf-accent) {player.volume}%, var(--mf-track) {player.volume}%)"

frontend/src/lib/player/player.svelte.ts

@@ -48,10 +48,11 @@ class PlayerState {
 	currentId = $state<string | number | null>(null);
 	playing = $state(false);
 	progress = $state(0);
-	volume = $state(70);
+	volume = $state(
+		browser ? Number(localStorage.getItem("player.volume") ?? 100) : 100
+	);
 	loading = $state(false);
 	error = $state('');
-
 	recentlyPlayed = $state<PlayerTrack[]>([]);
 	playlists = $state<Playlist[]>([]);
 
@@ -274,7 +275,10 @@ class PlayerState {
 	setVolume(value: number) {
 		this.volume = Math.min(100, Math.max(0, Math.round(value)));
 		const audio = this.#audioEl();
-		if (audio) audio.volume = this.volume / 100;
+		if (audio) {
+			audio.volume = this.volume / 100;
+			localStorage.setItem("player.volume", String(this.volume));
+		}
 	}
 }