From 131cd12faee71a497dc0a6a8ca99df2d50a226ac Mon Sep 17 00:00:00 2001
From: Tsiry Sandratraina <tsiry.sndr@rocksky.app>
Date: Sun, 19 Jul 2026 19:19:54 +0300
Subject: [PATCH] feat(player): run playback fully in-browser via rockbox-wasm
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move uploaded-track playback off the remote rockbox server + HLS and onto
the in-browser rockbox-wasm engine (decoders + DSP + queue + crossfade in
WebAssembly) in both apps/web and apps/web-mobile. No HLS, no remote-rockbox
API calls in the audible path.

Core
- lib/audio/rockbox-engine.ts: lazy RockboxPlayer singleton (baseUrl /rockbox),
  exact-URL metadata registry, applyAudioSettings/applyEq/applyCrossfade.
- useRockboxEngine: mirror engine track/progress/status/queue events into the
  jotai atoms (replaces the old GraphQL/<audio> polling).
- useUploadPlayer: drive the wasm queue; start only the chosen track then
  background-fill the rest so playback begins immediately.
- web: useAudioSettings persists to localStorage + the atproto lexicon and
  pushes to the engine (drops rockbox saveSettings GraphQL).
- vite: copy rockbox-wasm/dist -> public/rockbox (createRequire resolve, robust
  across Node/CI); optimizeDeps.exclude rockbox-wasm.

Fixes
- app-proxy: serve /rockbox/* from the Pages deploy (was an empty CDN -> 404 ->
  SPA html -> worklet AbortError); narrow match to the /rockbox/ prefix; drop
  the COOP/COEP the single-threaded build no longer needs.
- init the AudioContext within the user gesture (was created after an awaited
  stream-token fetch -> "Unable to load a worklet's module").
- keep the mini-player visible while playing (was cleared by the engine's
  startup "stopped, queue_len 0" status, which also detached listeners).
- EQ band centre frequencies are keyed by index (32 Hz … 16 kHz), never a
  stale persisted cutoff; labels show 32 … 500 / 1kHz … 16kHz.

UI
- EQ band faders reverted to native styled sliders (HeroUI broke global styles;
  its stylesheet was a global reset); baseweb Slider for the mobile crossfade.
- web-mobile: drop the <audio> element + custom DSP AudioWorklet + WAV fallback.

rockbox-wasm bumped to 0.1.3 (fixes the skipTo -> undefined beginManual crash).
---
 apps/app-proxy/src/index.ts                   |  27 +-
 apps/app-proxy/wrangler.json                  |   1 -
 apps/web-mobile/.gitignore                    |   4 +-
 apps/web-mobile/package.json                  |   2 +-
 apps/web-mobile/src/atoms/equalizer.ts        |  35 +-
 apps/web-mobile/src/atoms/queue.ts            |   1 +
 .../src/components/EqualizerSheet/index.tsx   | 213 +++++--
 .../src/components/MiniPlayer/index.tsx       | 344 +++--------
 .../src/dsp/rockbox-dsp-processor.ts          | 455 --------------
 apps/web-mobile/src/dsp/rockbox-dsp.ts        | 202 -------
 apps/web-mobile/src/hooks/useRockboxDSP.ts    | 105 ----
 apps/web-mobile/src/hooks/useRockboxEngine.ts | 148 +++++
 apps/web-mobile/src/hooks/useUploadPlayer.tsx | 103 ++--
 .../web-mobile/src/hooks/useUploadScrobble.ts | 146 ++---
 .../src/lib/audio/rockbox-engine.ts           | 115 ++++
 apps/web-mobile/src/vite-env.d.ts             |   5 -
 apps/web-mobile/vite.config.ts                |  29 +
 apps/web/.gitignore                           |   4 +-
 apps/web/package.json                         |   2 +-
 apps/web/src/atoms/equalizer.ts               |  23 +-
 .../EqualizerModal/EqualizerModal.tsx         |  37 +-
 .../StickyPlayer/StickyPlayerWithData.tsx     | 358 +++--------
 apps/web/src/hooks/useAudioSettings.tsx       | 568 +++++-------------
 apps/web/src/hooks/useQueueSync.tsx           |  84 ---
 apps/web/src/hooks/useRockboxDSP.ts           | 105 ----
 apps/web/src/hooks/useRockboxEngine.ts        | 138 +++++
 apps/web/src/hooks/useUploadPlayer.ts         | 218 ++-----
 apps/web/src/lib/audio/rockbox-engine.ts      | 227 +++++++
 apps/web/src/lib/hls-audio.ts                 | 192 ------
 apps/web/src/lib/rockbox-graphql.ts           | 274 ---------
 .../settings/audio/sections/Equalizer.tsx     |  14 +-
 apps/web/vite.config.ts                       |  27 +
 bun.lock                                      |  72 +--
 33 files changed, 1452 insertions(+), 2826 deletions(-)
 delete mode 100644 apps/web-mobile/src/dsp/rockbox-dsp-processor.ts
 delete mode 100644 apps/web-mobile/src/dsp/rockbox-dsp.ts
 delete mode 100644 apps/web-mobile/src/hooks/useRockboxDSP.ts
 create mode 100644 apps/web-mobile/src/hooks/useRockboxEngine.ts
 create mode 100644 apps/web-mobile/src/lib/audio/rockbox-engine.ts
 delete mode 100644 apps/web/src/hooks/useQueueSync.tsx
 delete mode 100644 apps/web/src/hooks/useRockboxDSP.ts
 create mode 100644 apps/web/src/hooks/useRockboxEngine.ts
 create mode 100644 apps/web/src/lib/audio/rockbox-engine.ts
 delete mode 100644 apps/web/src/lib/hls-audio.ts
 delete mode 100644 apps/web/src/lib/rockbox-graphql.ts

diff --git a/apps/app-proxy/src/index.ts b/apps/app-proxy/src/index.ts
index f6d42618..9afdf6af 100644
--- a/apps/app-proxy/src/index.ts
+++ b/apps/app-proxy/src/index.ts
@@ -90,18 +90,21 @@ export default {
 			return new Response(null, { status: 204, headers: corsHeaders(origin) });
 		}
 
-		// Serve Rockbox WASM assets from R2 with COOP/COEP headers required for SharedArrayBuffer
-		if (url.pathname.toLowerCase().includes('rockbox')) {
-			const baseUrl = (env as any).ROCKBOX_ASSETS_URL as string;
-			const assetUrl = `${baseUrl.replace(/\/$/, '')}${url.pathname}`;
-			const assetRes = await fetch(assetUrl);
+		// Serve rockbox-wasm runtime assets (audio worklet + decoder worker + the
+		// wasm-embedded core) from the web deployment, where the Vite build ships
+		// them at /rockbox/*. The current package is single-threaded with the wasm
+		// embedded (Emscripten SINGLE_FILE), so it needs NO SharedArrayBuffer and
+		// NO COOP/COEP — and the assets are versioned with the app rather than a
+		// separately-maintained CDN/R2 bucket. Match the /rockbox/ path prefix
+		// only (not any path merely containing "rockbox", e.g. the
+		// app.rocksky.rockbox.* XRPC endpoints).
+		if (url.pathname.startsWith('/rockbox/')) {
+			const assetUrl = new URL(request.url);
+			assetUrl.host = 'rocksky.pages.dev';
+			assetUrl.hostname = 'rocksky.pages.dev';
+			const assetRes = await fetch(assetUrl, request);
 			const headers = new Headers(assetRes.headers);
-			headers.set('Cross-Origin-Opener-Policy', 'same-origin');
-			headers.set('Cross-Origin-Embedder-Policy', 'credentialless');
 			headers.set('Access-Control-Allow-Origin', '*');
-			if (url.pathname.endsWith('.wasm')) {
-				headers.set('Content-Type', 'application/wasm');
-			}
 			return new Response(assetRes.body, { status: assetRes.status, headers });
 		}
 
@@ -169,8 +172,6 @@ export default {
 			if (!og) return htmlRes;
 			const headers = new Headers(htmlRes.headers);
 			headers.set('cache-control', 'public, max-age=300');
-			headers.set('Cross-Origin-Opener-Policy', 'same-origin');
-			headers.set('Cross-Origin-Embedder-Policy', 'credentialless');
 
 			const rewritten = new HTMLRewriter()
 				.on('meta[property^="og:"]', new StripMeta())
@@ -194,8 +195,6 @@ export default {
 
 		const headers = new Headers(htmlRes.headers);
 		headers.set('cache-control', 'public, max-age=300');
-		headers.set('Cross-Origin-Opener-Policy', 'same-origin');
-		headers.set('Cross-Origin-Embedder-Policy', 'credentialless');
 
 		const rewritten = new HTMLRewriter()
 			.on('meta[property^="og:"]', new StripMeta())
diff --git a/apps/app-proxy/wrangler.json b/apps/app-proxy/wrangler.json
index 0f843168..c4daba30 100644
--- a/apps/app-proxy/wrangler.json
+++ b/apps/app-proxy/wrangler.json
@@ -27,7 +27,6 @@
    * Environment Variables
    * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
    */
-  "vars": { "ROCKBOX_ASSETS_URL": "https://cdn.rocksky.app" },
   /**
    * Note: Use secrets to store sensitive data.
    * https://developers.cloudflare.com/workers/configuration/secrets/
diff --git a/apps/web-mobile/.gitignore b/apps/web-mobile/.gitignore
index 961e460b..48f1eb3b 100644
--- a/apps/web-mobile/.gitignore
+++ b/apps/web-mobile/.gitignore
@@ -30,4 +30,6 @@ dist-ssr
 *storybook.log
 
 .env
-.env.prod
\ No newline at end of file
+.env.prod
+# rockbox-wasm runtime assets (copied from node_modules by vite.config.ts)
+public/rockbox
diff --git a/apps/web-mobile/package.json b/apps/web-mobile/package.json
index 44ab5f53..57873b50 100644
--- a/apps/web-mobile/package.json
+++ b/apps/web-mobile/package.json
@@ -22,7 +22,6 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-query": "^5.76.0",
     "@types/numeral": "^2.0.5",
-    "audio-decode": "^3.10.1",
     "axios": "^1.7.9",
     "baseui": "15.0.0",
     "consola": "^3.2.3",
@@ -39,6 +38,7 @@
     "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.6.3",
     "recharts": "^2.15.1",
+    "rockbox-wasm": "^0.1.3",
     "styletron-engine-monolithic": "^1.0.0",
     "styletron-react": "^6.1.1",
     "tailwindcss": "^4.0.0",
diff --git a/apps/web-mobile/src/atoms/equalizer.ts b/apps/web-mobile/src/atoms/equalizer.ts
index fa578db7..cbd412de 100644
--- a/apps/web-mobile/src/atoms/equalizer.ts
+++ b/apps/web-mobile/src/atoms/equalizer.ts
@@ -5,22 +5,31 @@ export interface EqBandSetting {
   gain: number; // dB, clamped to [-24, +24]
 }
 
+// The 10 EQ band centre frequencies (32 Hz … 16 kHz). Shared canonical set —
+// index-aligned with the EQ UI and the wasm engine. Matches atradio.fm.
+export const EQ_BANDS_HZ = [
+  32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000,
+] as const;
+
 // 10-band EQ: band 0 = low-shelf, bands 1-8 = peaking, band 9 = high-shelf
-export const EQ_BANDS: EqBandSetting[] = [
-  { cutoff: 60,    gain: 0 },
-  { cutoff: 200,   gain: 0 },
-  { cutoff: 500,   gain: 0 },
-  { cutoff: 1000,  gain: 0 },
-  { cutoff: 2000,  gain: 0 },
-  { cutoff: 4000,  gain: 0 },
-  { cutoff: 7000,  gain: 0 },
-  { cutoff: 10000, gain: 0 },
-  { cutoff: 14000, gain: 0 },
-  { cutoff: 20000, gain: 0 },
-];
+export const EQ_BANDS: EqBandSetting[] = EQ_BANDS_HZ.map((cutoff) => ({
+  cutoff,
+  gain: 0,
+}));
 
-// Q=7.0 matches the Rockbox firmware default (stored as tenths: 70 → 7.0).
+// Q=7.0 matches the Rockbox firmware default.
 export const EQ_Q = 7.0;
 
 export const eqEnabledAtom = atomWithStorage<boolean>("eq_enabled", false);
 export const eqBandsAtom = atomWithStorage<EqBandSetting[]>("eq_bands", EQ_BANDS);
+
+// ── Crossfade (rockbox pcmbuf algorithm, run in the wasm engine) ─────────────
+export const crossfadeEnabledAtom = atomWithStorage<boolean>(
+  "crossfade_enabled",
+  false,
+);
+// Fade in/out duration in seconds (Rockbox range 0–15 s).
+export const crossfadeDurationAtom = atomWithStorage<number>(
+  "crossfade_duration",
+  2,
+);
diff --git a/apps/web-mobile/src/atoms/queue.ts b/apps/web-mobile/src/atoms/queue.ts
index 195faf11..b0924693 100644
--- a/apps/web-mobile/src/atoms/queue.ts
+++ b/apps/web-mobile/src/atoms/queue.ts
@@ -10,6 +10,7 @@ export interface QueueTrack {
   duration: number;
   sha256: string;
   songUri: string;
+  streamUrl?: string;
 }
 
 export const queueAtom = atom<QueueTrack[]>([]);
diff --git a/apps/web-mobile/src/components/EqualizerSheet/index.tsx b/apps/web-mobile/src/components/EqualizerSheet/index.tsx
index da327a1a..eca444bc 100644
--- a/apps/web-mobile/src/components/EqualizerSheet/index.tsx
+++ b/apps/web-mobile/src/components/EqualizerSheet/index.tsx
@@ -1,10 +1,123 @@
 import { IconX } from "@tabler/icons-react";
+import { Slider } from "baseui/slider";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
-import { eqBandsAtom, eqEnabledAtom, EQ_BANDS, type EqBandSetting } from "../../atoms/equalizer";
+import {
+  crossfadeDurationAtom,
+  crossfadeEnabledAtom,
+  eqBandsAtom,
+  eqEnabledAtom,
+  EQ_BANDS,
+  EQ_BANDS_HZ,
+  type EqBandSetting,
+} from "../../atoms/equalizer";
 
 function formatFreq(hz: number) {
-  return hz >= 1000 ? `${hz / 1000}k` : `${hz}`;
+  return hz >= 1000 ? `${hz / 1000}kHz` : `${hz}`;
+}
+
+// Compact, on-brand overrides for the baseweb Slider (crossfade duration).
+const SLIDER_OVERRIDES = {
+  Root: { style: { flexGrow: 1 } },
+  Track: {
+    style: {
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingTop: "8px",
+      paddingBottom: "8px",
+    },
+  },
+  InnerTrack: {
+    style: {
+      height: "6px",
+      borderTopLeftRadius: "3px",
+      borderTopRightRadius: "3px",
+      borderBottomLeftRadius: "3px",
+      borderBottomRightRadius: "3px",
+      background: "var(--color-border)",
+    },
+  },
+  Thumb: {
+    style: ({ $disabled }: { $disabled?: boolean }) => ({
+      height: "16px",
+      width: "16px",
+      borderTopLeftRadius: "50%",
+      borderTopRightRadius: "50%",
+      borderBottomLeftRadius: "50%",
+      borderBottomRightRadius: "50%",
+      backgroundColor: "var(--color-primary)",
+      borderWidth: 0,
+      opacity: $disabled ? 0.35 : 1,
+    }),
+  },
+  InnerThumb: { style: { display: "none" } },
+  ThumbValue: { style: { display: "none" } },
+  Tick: { style: { display: "none" } },
+  TickBar: { style: { display: "none" } },
+};
+
+// EQ band faders use native range inputs — baseweb's Slider is horizontal-only
+// (can't render the vertical portrait faders) and too chunky for a dense
+// 10-band grid. baseweb's Slider IS used for the horizontal crossfade below.
+
+/** One vertical EQ band fader (portrait, gain in dB). */
+function VertBandSlider(props: {
+  value: number;
+  disabled: boolean;
+  onChange: (v: number) => void;
+  "aria-label": string;
+}) {
+  return (
+    <input
+      type="range"
+      aria-label={props["aria-label"]}
+      min={-24}
+      max={24}
+      step={1}
+      value={props.value}
+      disabled={props.disabled}
+      onChange={(e) => props.onChange(Number(e.target.value))}
+      style={{
+        appearance: "none",
+        WebkitAppearance: "slider-vertical",
+        writingMode: "vertical-lr",
+        direction: "rtl",
+        width: 20,
+        height: 120,
+        cursor: props.disabled ? "not-allowed" : "pointer",
+        accentColor: "var(--color-primary)",
+        opacity: props.disabled ? 0.35 : 1,
+      } as React.CSSProperties}
+    />
+  );
+}
+
+/** One horizontal EQ band fader (landscape layout, gain in dB). */
+function HorizBandSlider(props: {
+  value: number;
+  disabled: boolean;
+  onChange: (v: number) => void;
+  "aria-label": string;
+}) {
+  return (
+    <input
+      type="range"
+      aria-label={props["aria-label"]}
+      min={-24}
+      max={24}
+      step={1}
+      value={props.value}
+      disabled={props.disabled}
+      onChange={(e) => props.onChange(Number(e.target.value))}
+      className="flex-1"
+      style={{
+        accentColor: "var(--color-primary)",
+        opacity: props.disabled ? 0.35 : 1,
+        cursor: props.disabled ? "not-allowed" : "pointer",
+        height: 4,
+      }}
+    />
+  );
 }
 
 function EqCurve({ bands, enabled }: { bands: EqBandSetting[]; enabled: boolean }) {
@@ -63,6 +176,8 @@ type Props = { open: boolean; onClose: () => void };
 export default function EqualizerSheet({ open, onClose }: Props) {
   const [enabled, setEnabled] = useAtom(eqEnabledAtom);
   const [bands, setBands] = useAtom(eqBandsAtom);
+  const [crossfadeEnabled, setCrossfadeEnabled] = useAtom(crossfadeEnabledAtom);
+  const [crossfadeDuration, setCrossfadeDuration] = useAtom(crossfadeDurationAtom);
 
   const setBandGain = useCallback((index: number, gain: number) => {
     setBands((prev) => prev.map((b, i) => i === index ? { ...b, gain } : b));
@@ -142,7 +257,7 @@ export default function EqualizerSheet({ open, onClose }: Props) {
         </div>
 
         {/* Sliders — portrait: vertical, landscape: horizontal rows */}
-        <div className="landscape:hidden flex px-2 pb-6" style={{ gap: 0 }}>
+        <div className="landscape:hidden flex px-2 pb-4" style={{ gap: 0 }}>
           {/* dB labels column */}
           <div className="flex flex-col justify-between items-end pr-1 shrink-0" style={{ height: 150, paddingTop: 18, paddingBottom: 20 }}>
             <span style={{ fontSize: "0.55rem", color: "var(--color-text-muted)", fontWeight: 600 }}>+24</span>
@@ -155,36 +270,22 @@ export default function EqualizerSheet({ open, onClose }: Props) {
                 {band.gain > 0 ? `+${band.gain}` : band.gain}
               </span>
               <div style={{ height: 130, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                <input
-                  type="range"
-                  min={-24}
-                  max={24}
-                  step={1}
+                <VertBandSlider
+                  aria-label={`${formatFreq(EQ_BANDS_HZ[i] ?? band.cutoff)} gain`}
                   value={band.gain}
                   disabled={!enabled}
-                  onChange={(e) => setBandGain(i, Number(e.target.value))}
-                  style={{
-                    appearance: "none",
-                    WebkitAppearance: "slider-vertical",
-                    writingMode: "vertical-lr",
-                    direction: "rtl",
-                    width: 20,
-                    height: 120,
-                    cursor: enabled ? "pointer" : "not-allowed",
-                    accentColor: "var(--color-primary)",
-                    opacity: enabled ? 1 : 0.35,
-                  } as React.CSSProperties}
+                  onChange={(v) => setBandGain(i, v)}
                 />
               </div>
               <span style={{ fontSize: "0.58rem", color: "var(--color-text-muted)", fontWeight: 600, textAlign: "center" }}>
-                {formatFreq(band.cutoff)}
+                {formatFreq(EQ_BANDS_HZ[i] ?? band.cutoff)}
               </span>
             </div>
           ))}
         </div>
 
         {/* Landscape layout — horizontal sliders in a grid */}
-        <div className="hidden landscape:block px-4 pb-4">
+        <div className="hidden landscape:block px-4 pb-2">
           {/* dB axis labels */}
           <div className="flex items-center mb-1 gap-2" style={{ paddingLeft: 36 }}>
             <span style={{ fontSize: "0.55rem", color: "var(--color-text-muted)", fontWeight: 600, flexShrink: 0 }}>-24dB</span>
@@ -197,23 +298,13 @@ export default function EqualizerSheet({ open, onClose }: Props) {
             {bands.map((band, i) => (
               <div key={i} className="flex items-center gap-2">
                 <span style={{ fontSize: "0.6rem", color: "var(--color-text-muted)", fontWeight: 600, width: 32, textAlign: "right", flexShrink: 0 }}>
-                  {formatFreq(band.cutoff)}
+                  {formatFreq(EQ_BANDS_HZ[i] ?? band.cutoff)}
                 </span>
-                <input
-                  type="range"
-                  min={-24}
-                  max={24}
-                  step={1}
+                <HorizBandSlider
+                  aria-label={`${formatFreq(EQ_BANDS_HZ[i] ?? band.cutoff)} gain`}
                   value={band.gain}
                   disabled={!enabled}
-                  onChange={(e) => setBandGain(i, Number(e.target.value))}
-                  className="flex-1"
-                  style={{
-                    accentColor: "var(--color-primary)",
-                    opacity: enabled ? 1 : 0.35,
-                    cursor: enabled ? "pointer" : "not-allowed",
-                    height: 4,
-                  }}
+                  onChange={(v) => setBandGain(i, v)}
                 />
                 <span style={{ fontSize: "0.6rem", color: "var(--color-text-muted)", fontWeight: 600, width: 28, textAlign: "right", flexShrink: 0 }}>
                   {band.gain > 0 ? `+${band.gain}` : band.gain}dB
@@ -222,6 +313,56 @@ export default function EqualizerSheet({ open, onClose }: Props) {
             ))}
           </div>
         </div>
+
+        {/* Crossfade — smooth transitions between tracks (rockbox pcmbuf) */}
+        <div
+          className="px-5 py-3 flex items-center gap-3"
+          style={{ borderTop: "1px solid var(--color-border)" }}
+        >
+          <button
+            onClick={() => setCrossfadeEnabled((v) => !v)}
+            className="flex items-center gap-2 border-none bg-transparent cursor-pointer p-0"
+            style={{ color: crossfadeEnabled ? "var(--color-primary)" : "var(--color-text-muted)" }}
+          >
+            <span
+              className="relative inline-flex shrink-0"
+              style={{
+                width: 32, height: 18, borderRadius: 9,
+                background: crossfadeEnabled ? "var(--color-primary)" : "var(--color-border)",
+                transition: "background 0.2s",
+              }}
+            >
+              <span
+                style={{
+                  position: "absolute", top: 2,
+                  left: crossfadeEnabled ? 16 : 2,
+                  width: 14, height: 14,
+                  borderRadius: "50%", background: "#fff",
+                  transition: "left 0.2s",
+                }}
+              />
+            </span>
+            <span className="text-xs font-semibold">Crossfade</span>
+          </button>
+          <div className="flex-1 flex items-center gap-2">
+            <div className="flex-1">
+              <Slider
+                min={1}
+                max={12}
+                step={1}
+                value={[crossfadeDuration]}
+                disabled={!crossfadeEnabled}
+                onChange={({ value }) => {
+                  if (value?.length) setCrossfadeDuration(value[0]);
+                }}
+                overrides={SLIDER_OVERRIDES}
+              />
+            </div>
+            <span style={{ fontSize: "0.6rem", color: "var(--color-text-muted)", fontWeight: 600, width: 28, textAlign: "right", flexShrink: 0 }}>
+              {crossfadeDuration}s
+            </span>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/apps/web-mobile/src/components/MiniPlayer/index.tsx b/apps/web-mobile/src/components/MiniPlayer/index.tsx
index 9c99037c..dbec24c0 100644
--- a/apps/web-mobile/src/components/MiniPlayer/index.tsx
+++ b/apps/web-mobile/src/components/MiniPlayer/index.tsx
@@ -10,7 +10,7 @@ import {
   IconX,
   IconAdjustmentsHorizontal,
 } from "@tabler/icons-react";
-import { useAtom, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { nowPlayingAtom } from "../../atoms/nowpaying";
@@ -22,39 +22,19 @@ import useLike from "../../hooks/useLike";
 import useSpotify from "../../hooks/useSpotify";
 import { useQueuePersistence } from "../../hooks/useQueuePersistence";
 import { useUploadScrobble } from "../../hooks/useUploadScrobble";
-import { getStreamUrl, ensureStreamToken } from "../../api/uploads";
-import { useRockboxDSP } from "../../hooks/useRockboxDSP";
+import { useRockboxEngine } from "../../hooks/useRockboxEngine";
+import {
+  ensureRockboxReady,
+  getRockboxPlayer,
+  registerTracks,
+  streamUrlFor,
+} from "../../lib/audio/rockbox-engine";
+import { ensureStreamToken } from "../../api/uploads";
 import EqualizerSheet from "../EqualizerSheet";
 import PlayerScreen from "../PlayerScreen";
 import axios from "axios";
 import { API_URL } from "../../consts";
 import _ from "lodash";
-import { consola } from "consola";
-
-// Encode decoded PCM samples to a 16-bit WAV blob for HTML5 audio playback.
-function pcmToWavBlob(channelData: Float32Array[], sampleRate: number): Blob {
-  const nc = channelData.length;
-  const ns = channelData[0].length;
-  const buf = new ArrayBuffer(44 + ns * nc * 2);
-  const v = new DataView(buf);
-  const w = (off: number, s: string) => { for (let i = 0; i < s.length; i++) v.setUint8(off + i, s.charCodeAt(i)); };
-  w(0, "RIFF"); v.setUint32(4, 36 + ns * nc * 2, true);
-  w(8, "WAVE"); w(12, "fmt ");
-  v.setUint32(16, 16, true); v.setUint16(20, 1, true);
-  v.setUint16(22, nc, true); v.setUint32(24, sampleRate, true);
-  v.setUint32(28, sampleRate * nc * 2, true); v.setUint16(32, nc * 2, true);
-  v.setUint16(34, 16, true); w(36, "data");
-  v.setUint32(40, ns * nc * 2, true);
-  let off = 44;
-  for (let i = 0; i < ns; i++) {
-    for (let ch = 0; ch < nc; ch++) {
-      const s = Math.max(-1, Math.min(1, channelData[ch][i]));
-      v.setInt16(off, s < 0 ? s * 0x8000 : s * 0x7fff, true);
-      off += 2;
-    }
-  }
-  return new Blob([buf], { type: "audio/wav" });
-}
 
 // ---------------------------------------------------------------------------
 // Source selector bottom sheet
@@ -141,11 +121,14 @@ function SourceItem({ label, active, onClick }: { label: string; active: boolean
 
 export default function MiniPlayer() {
   useQueuePersistence();
+  // Bridge the in-browser rockbox-wasm engine → jotai atoms + push EQ/crossfade.
+  useRockboxEngine();
+  useUploadScrobble();
   const setPlayerScreenOpen = useSetAtom(playerScreenOpenAtom);
 
   const [nowPlaying, setNowPlaying] = useAtom(nowPlayingAtom);
   const [player, setPlayer] = useAtom(playerAtom);
-  const [queue, setQueue] = useAtom(queueAtom);
+  const queue = useAtomValue(queueAtom);
   const [queueIndex, setQueueIndex] = useAtom(queueIndexAtom);
   const { like, unlike } = useLike();
   const { play, pause, next } = useSpotify();
@@ -164,15 +147,6 @@ export default function MiniPlayer() {
   const [eqSheetOpen, setEqSheetOpen] = useState(false);
   const [shuffle, setShuffle] = useAtom(shuffleAtom);
   const [repeatMode, setRepeatMode] = useAtom(repeatModeAtom);
-  const shuffleRef = useRef(shuffle);
-  const repeatModeRef = useRef(repeatMode);
-
-  // Hidden audio element for upload player
-  const audioRef = useRef<HTMLAudioElement>(null);
-
-  useRockboxDSP(audioRef);
-  useUploadScrobble(audioRef);
-  const audioBlobUrlRef = useRef<string | null>(null);
 
   // Keep refs in sync
   useEffect(() => {
@@ -181,9 +155,39 @@ export default function MiniPlayer() {
     likedRef.current = liked;
     queueRef.current = queue;
     queueIndexRef.current = queueIndex;
-    shuffleRef.current = shuffle;
-    repeatModeRef.current = repeatMode;
-  }, [nowPlaying, player, liked, queue, queueIndex, shuffle, repeatMode]);
+  }, [nowPlaying, player, liked, queue, queueIndex]);
+
+  // Push shuffle/repeat to the engine while the upload (wasm) player is active.
+  useEffect(() => {
+    if (player !== "upload") return;
+    const p = getRockboxPlayer();
+    if (p.ready) p.setShuffle(shuffle);
+  }, [shuffle, player]);
+
+  useEffect(() => {
+    if (player !== "upload") return;
+    const p = getRockboxPlayer();
+    if (p.ready) p.setRepeat(repeatMode === "one" ? 1 : repeatMode === "all" ? 2 : 0);
+  }, [repeatMode, player]);
+
+  /** Ensure the wasm engine has the current queue loaded, then return it.
+   *  Used when (re)activating the upload player — e.g. after a restore or when
+   *  switching back to it from Spotify. Idempotent: won't reload if already
+   *  holding a queue. */
+  const ensureEngineQueue = useCallback(async () => {
+    const p = await ensureRockboxReady();
+    if (p.queue.length === 0) {
+      const q = queueRef.current;
+      if (q.length) {
+        await ensureStreamToken();
+        registerTracks(q);
+        p.setQueue(q.map(streamUrlFor), false);
+        const idx = queueIndexRef.current;
+        if (idx > 0) p.skipTo(idx);
+      }
+    }
+    return p;
+  }, []);
 
   const fetchCurrentlyPlaying = useCallback(async () => {
     if (playerRef.current === "rockbox" || playerRef.current === "upload") return;
@@ -221,123 +225,15 @@ export default function MiniPlayer() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setNowPlaying, setPlayer]);
 
-  // Stop upload audio when switching to another player
+  // Stop wasm playback when switching away from the upload player.
   useEffect(() => {
     if (player === "upload") return;
-    const audio = audioRef.current;
-    if (audio) { audio.pause(); audio.src = ""; }
-    if (audioBlobUrlRef.current) { URL.revokeObjectURL(audioBlobUrlRef.current); audioBlobUrlRef.current = null; }
-  }, [player]);
-
-  // Load audio when upload track changes
-  useEffect(() => {
-    if (player !== "upload") return;
-    const track = queue[queueIndex];
-    if (!track) return;
-
-    if (audioBlobUrlRef.current) { URL.revokeObjectURL(audioBlobUrlRef.current); audioBlobUrlRef.current = null; }
-
-    let cancelled = false;
-    ensureStreamToken().then(() => {
-      if (cancelled) return;
-      const audio = audioRef.current;
-      if (!audio) return;
-      audio.src = getStreamUrl(track.uploadId);
-      if (nowPlayingRef.current?.isPlaying) audio.play().catch(() => {});
-    });
-
-    return () => { cancelled = true; };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [player, queueIndex]);
-
-  // Audio event listeners for upload player
-  useEffect(() => {
-    if (player !== "upload") return;
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const onTimeUpdate = () => {
-      setNowPlaying((prev) =>
-        prev ? { ...prev, progress: Math.floor(audio.currentTime * 1000) } : prev,
-      );
-    };
-    const onPlay = () => setNowPlaying((prev) => prev ? { ...prev, isPlaying: true } : prev);
-    const onPause = () => setNowPlaying((prev) => prev ? { ...prev, isPlaying: false } : prev);
-    const onEnded = () => {
-      const q = queueRef.current;
-      const cur = queueIndexRef.current;
-      if (repeatModeRef.current === "one") {
-        audio.currentTime = 0;
-        audio.play().catch(() => {});
-        setNowPlaying((prev) => prev ? { ...prev, progress: 0, isPlaying: true } : prev);
-        return;
-      }
-      let nextIdx: number;
-      if (shuffleRef.current && q.length > 1) {
-        do { nextIdx = Math.floor(Math.random() * q.length); } while (nextIdx === cur);
-      } else {
-        nextIdx = cur + 1;
-      }
-      const nextTrack = q[nextIdx] ?? (repeatModeRef.current === "all" ? q[0] : null);
-      const resolvedIdx = q[nextIdx] ? nextIdx : (repeatModeRef.current === "all" ? 0 : -1);
-      if (nextTrack && resolvedIdx >= 0) {
-        setQueueIndex(resolvedIdx);
-        setNowPlaying({
-          title: nextTrack.title,
-          artist: nextTrack.artist,
-          artistUri: "",
-          songUri: nextTrack.songUri ?? "",
-          albumUri: "",
-          duration: nextTrack.duration,
-          progress: 0,
-          albumArt: nextTrack.albumArt ?? undefined,
-          isPlaying: true,
-          sha256: nextTrack.sha256,
-          liked: false,
-        });
-      }
-    };
-    // Fallback: when HTML5 can't decode the format, use audio-type to identify it
-    // and audio-decode to transcode to WAV for playback.
-    const onError = async () => {
-      const errCode = audio.error?.code;
-      if (errCode !== MediaError.MEDIA_ERR_DECODE && errCode !== MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) return;
-      if (!audio.src || audio.src.startsWith("blob:")) return;
-      const srcUrl = audio.src;
-      try {
-        const response = await fetch(srcUrl);
-        const arrayBuffer = await response.arrayBuffer();
-        const { default: audioType } = await import("audio-type");
-        const format = audioType(new Uint8Array(arrayBuffer));
-        consola.info("[upload] HTML5 failed for format:", format, "— falling back to audio-decode");
-        const { default: decode } = await import("audio-decode");
-        const { channelData, sampleRate } = await decode(arrayBuffer);
-        const blob = pcmToWavBlob(channelData, sampleRate);
-        if (audioBlobUrlRef.current) URL.revokeObjectURL(audioBlobUrlRef.current);
-        audioBlobUrlRef.current = URL.createObjectURL(blob);
-        audio.src = audioBlobUrlRef.current;
-        if (nowPlayingRef.current?.isPlaying) audio.play().catch(() => {});
-      } catch (e) {
-        consola.warn("[upload] audio-decode fallback failed:", e);
-      }
-    };
-
-    audio.addEventListener("timeupdate", onTimeUpdate);
-    audio.addEventListener("play", onPlay);
-    audio.addEventListener("pause", onPause);
-    audio.addEventListener("ended", onEnded);
-    audio.addEventListener("error", onError);
-    return () => {
-      audio.removeEventListener("timeupdate", onTimeUpdate);
-      audio.removeEventListener("play", onPlay);
-      audio.removeEventListener("pause", onPause);
-      audio.removeEventListener("ended", onEnded);
-      audio.removeEventListener("error", onError);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    const p = getRockboxPlayer();
+    if (p.ready) p.pause();
   }, [player]);
 
-  // Progress ticker (Spotify / Rockbox device)
+  // Progress ticker (Spotify only — upload progress comes from engine events,
+  // the WebSocket rockbox device reports its own elapsed).
   useEffect(() => {
     progressInterval.current = window.setInterval(() => {
       setNowPlaying((prev) => {
@@ -363,7 +259,7 @@ export default function MiniPlayer() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // WebSocket for Rockbox device
+  // WebSocket for Rockbox device (companion hardware — monitors its now-playing)
   useEffect(() => {
     if (!localStorage.getItem("token")) return;
     const wsUrl = API_URL.replace("https", "wss").replace("http", "ws");
@@ -442,19 +338,8 @@ export default function MiniPlayer() {
   const onPlayPause = async () => {
     if (!nowPlaying) return;
     if (player === "upload") {
-      const audio = audioRef.current;
-      if (!audio) return;
-      if (nowPlaying.isPlaying) {
-        audio.pause();
-      } else if (!audio.src) {
-        await ensureStreamToken();
-        const track = queueRef.current[queueIndexRef.current];
-        if (!track) return;
-        audio.src = getStreamUrl(track.uploadId);
-        audio.play().catch(() => {});
-      } else {
-        audio.play().catch(() => {});
-      }
+      const p = await ensureEngineQueue();
+      p.toggle();
       return;
     }
     if (player === "rockbox" && socketRef.current) {
@@ -470,31 +355,7 @@ export default function MiniPlayer() {
 
   const onNext = () => {
     if (player === "upload") {
-      const q = queueRef.current;
-      const cur = queueIndexRef.current;
-      let nextIdx: number;
-      if (shuffleRef.current && q.length > 1) {
-        do { nextIdx = Math.floor(Math.random() * q.length); } while (nextIdx === cur);
-      } else {
-        nextIdx = cur + 1;
-      }
-      const nextTrack = q[nextIdx] ?? (repeatModeRef.current === "all" ? q[0] : null);
-      const resolvedIdx = q[nextIdx] ? nextIdx : (repeatModeRef.current === "all" ? 0 : -1);
-      if (!nextTrack || resolvedIdx < 0) return;
-      setQueueIndex(resolvedIdx);
-      setNowPlaying({
-        title: nextTrack.title,
-        artist: nextTrack.artist,
-        artistUri: "",
-        songUri: nextTrack.songUri ?? "",
-        albumUri: "",
-        duration: nextTrack.duration,
-        progress: 0,
-        albumArt: nextTrack.albumArt ?? undefined,
-        isPlaying: true,
-        sha256: nextTrack.sha256,
-        liked: false,
-      });
+      getRockboxPlayer().next();
       return;
     }
     if (player === "rockbox" && socketRef.current) {
@@ -508,56 +369,23 @@ export default function MiniPlayer() {
 
   const onPrevious = () => {
     if (player !== "upload") return;
-    const audio = audioRef.current;
-    if (audio && audio.currentTime > 3) {
-      audio.currentTime = 0;
-      setNowPlaying((prev) => prev ? { ...prev, progress: 0 } : prev);
-      return;
-    }
-    const prevIdx = queueIndexRef.current - 1;
-    const prevTrack = queueRef.current[prevIdx];
-    if (!prevTrack) return;
-    setQueueIndex(prevIdx);
-    setNowPlaying({
-      title: prevTrack.title,
-      artist: prevTrack.artist,
-      artistUri: "",
-      songUri: prevTrack.songUri ?? "",
-      albumUri: "",
-      duration: prevTrack.duration,
-      progress: 0,
-      albumArt: prevTrack.albumArt ?? undefined,
-      isPlaying: true,
-      sha256: prevTrack.sha256,
-      liked: false,
-    });
+    getRockboxPlayer().prev();
   };
 
   const onSeek = useCallback((positionMs: number) => {
-    const audio = audioRef.current;
-    if (audio) audio.currentTime = positionMs / 1000;
+    if (playerRef.current === "upload") {
+      const p = getRockboxPlayer();
+      if (p.ready) p.seek(positionMs);
+    }
     setNowPlaying((prev) => prev ? { ...prev, progress: positionMs } : prev);
   }, [setNowPlaying]);
 
   const onSelectQueueIndex = useCallback((idx: number) => {
-    const q = queueRef.current;
-    const curIdx = queueIndexRef.current;
-    const track = q[idx];
+    const track = queueRef.current[idx];
     if (!track) return;
-    if (idx < curIdx) {
-      // History click: splice track out and insert it just before the current
-      // track so "up next" remains the original current + everything after.
-      const newQueue = [
-        ...q.slice(0, idx),
-        ...q.slice(idx + 1, curIdx),
-        track,
-        ...q.slice(curIdx),
-      ];
-      setQueue(newQueue);
-      setQueueIndex(curIdx - 1);
-    } else {
-      setQueueIndex(idx);
-    }
+    getRockboxPlayer().skipTo(idx);
+    // Optimistic now-playing for instant UI; engine track event reconciles.
+    setQueueIndex(idx);
     setNowPlaying({
       title: track.title,
       artist: track.artist,
@@ -571,36 +399,11 @@ export default function MiniPlayer() {
       sha256: track.sha256,
       liked: false,
     });
-  }, [setQueue, setQueueIndex, setNowPlaying]);
+  }, [setQueueIndex, setNowPlaying]);
 
   const onRemoveFromQueue = useCallback((idx: number) => {
-    setQueue((prev) => {
-      const next = prev.filter((_, i) => i !== idx);
-      const currentIdx = queueIndexRef.current;
-      if (idx < currentIdx) {
-        setQueueIndex(currentIdx - 1);
-      } else if (idx === currentIdx) {
-        const nextTrack = next[currentIdx] ?? next[currentIdx - 1];
-        if (nextTrack) {
-          setNowPlaying({
-            title: nextTrack.title,
-            artist: nextTrack.artist,
-            artistUri: "",
-            songUri: nextTrack.songUri ?? "",
-            albumUri: "",
-            duration: nextTrack.duration,
-            progress: 0,
-            albumArt: nextTrack.albumArt ?? undefined,
-            isPlaying: true,
-            sha256: nextTrack.sha256,
-            liked: false,
-          });
-          setQueueIndex(Math.min(currentIdx, next.length - 1));
-        }
-      }
-      return next;
-    });
-  }, [setQueue, setQueueIndex, setNowPlaying]);
+    getRockboxPlayer().removeAt(idx);
+  }, []);
 
   // Media Session API — keeps Android/iOS lock-screen / notification in sync
   useEffect(() => {
@@ -613,17 +416,19 @@ export default function MiniPlayer() {
         : [],
     });
     navigator.mediaSession.setActionHandler("play", () => {
-      audioRef.current?.play().catch(() => {});
+      const p = getRockboxPlayer();
+      if (p.ready) p.play();
     });
     navigator.mediaSession.setActionHandler("pause", () => {
-      audioRef.current?.pause();
+      const p = getRockboxPlayer();
+      if (p.ready) p.pause();
     });
     navigator.mediaSession.setActionHandler("previoustrack", onPrevious);
     navigator.mediaSession.setActionHandler("nexttrack", onNext);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nowPlaying?.title, nowPlaying?.artist, nowPlaying?.albumArt]);
 
-  if (!nowPlaying) return <audio ref={audioRef} crossOrigin="anonymous" style={{ display: "none" }} />;
+  if (!nowPlaying) return null;
 
   const progress =
     nowPlaying.duration > 0
@@ -638,8 +443,6 @@ export default function MiniPlayer() {
 
   return (
     <>
-      <audio ref={audioRef} crossOrigin="anonymous" style={{ display: "none" }} />
-
       <EqualizerSheet open={eqSheetOpen} onClose={() => setEqSheetOpen(false)} />
 
       <PlayerScreen
@@ -682,6 +485,9 @@ export default function MiniPlayer() {
                 liked: false,
               });
             }
+            setPlayer(src);
+            void ensureEngineQueue();
+            return;
           }
           setPlayer(src);
           if (src === "spotify") fetchCurrentlyPlaying();
diff --git a/apps/web-mobile/src/dsp/rockbox-dsp-processor.ts b/apps/web-mobile/src/dsp/rockbox-dsp-processor.ts
deleted file mode 100644
index d65fea03..00000000
--- a/apps/web-mobile/src/dsp/rockbox-dsp-processor.ts
+++ /dev/null
@@ -1,455 +0,0 @@
-/**
- * rockbox-dsp-processor.ts
- *
- * Pure-TypeScript port of Rockbox DSP (lib/rbcodec/dsp/):
- *   - 10-band parametric EQ  (eq.c / dsp_filter.c — Audio-EQ-Cookbook biquads)
- *   - Haas surround effect    (surround.c — frequency-dependent delay lines)
- *
- * This file runs inside an AudioWorkletGlobalScope. Compile it with tsc (or a
- * bundler), then load the output JS with:
- *
- *   await audioContext.audioWorklet.addModule('rockbox-dsp-processor.js');
- *   const node = new AudioWorkletNode(ctx, 'rockbox-dsp');
- *
- * Use RockboxDSP in rockbox-dsp.ts for a type-safe main-thread wrapper.
- *
- * License: GPL-2.0 (same as the original Rockbox firmware)
- */
-
-// AudioWorklet globals not in the standard lib — declared here so tsc is happy.
-declare const sampleRate: number;
-declare class AudioWorkletProcessor {
-  readonly port: MessagePort;
-  constructor();
-  process(
-    inputs: Float32Array[][],
-    outputs: Float32Array[][],
-    parameters: Record<string, Float32Array>,
-  ): boolean;
-}
-declare function registerProcessor(
-  name: string,
-  ctor: new (options?: AudioWorkletNodeOptions) => AudioWorkletProcessor,
-): void;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface BandConfig {
-  cutoff: number; // Hz
-  q: number;      // Q factor (e.g. 0.7)
-  gain: number;   // dB — positive = boost, negative = cut
-}
-
-export interface SurroundConfig {
-  delayMs?: number;   // 5–30 ms
-  mix?: number;       // 0–100 %
-  balance?: number;   // -100 … +100
-  sideOnly?: boolean;
-  cutoffL?: number;   // Hz — bass/voice crossover  (default 320)
-  cutoffH?: number;   // Hz — voice/treble crossover (default 3400)
-}
-
-// Messages accepted by the processor from the main thread
-export type DspMessage =
-  | { type: 'eq.enable';       value: boolean }
-  | { type: 'eq.band';         band: number; cutoff: number; q: number; gain: number }
-  | { type: 'eq.precut';       value: number }
-  | { type: 'eq.flush' }
-  | { type: 'surround.enable'; value: boolean }
-  | { type: 'surround.delay';  value: number }
-  | { type: 'surround.mix';    value: number }
-  | { type: 'surround.balance';value: number }
-  | { type: 'surround.sideOnly';value: boolean }
-  | { type: 'surround.cutoffs';low: number; high: number }
-  | { type: 'surround.flush' };
-
-// ─────────────────────────────────────────────────────────────────────────────
-// BiquadFilter
-// Port of dsp_filter.c: filter_pk_coefs / filter_ls_coefs / filter_hs_coefs
-// and the direct-form-1 filter_process loop.
-//
-// The C code stores the 'a' coefficients negated so they are added in the
-// accumulator. Here they keep their natural sign; tick() subtracts them — the
-// standard floating-point convention.
-// ─────────────────────────────────────────────────────────────────────────────
-class BiquadFilter {
-  private b0 = 1; private b1 = 0; private b2 = 0;
-  private a1 = 0; private a2 = 0;
-  active = false;
-
-  // Direct-form-1 history for 2 channels:
-  //   [L_x1, L_x2, L_y1, L_y2, R_x1, R_x2, R_y1, R_y2]
-  private readonly h = new Float64Array(8);
-
-  // filter_pk_coefs — peaking EQ band
-  setPeaking(cutoff: number, q: number, gainDb: number, sr: number): void {
-    if (gainDb === 0) { this.bypass(); return; }
-    const A     = Math.pow(10, gainDb / 40);
-    const w0    = (2 * Math.PI * cutoff) / sr;
-    const sinw0 = Math.sin(w0), cosw0 = Math.cos(w0);
-    const alpha = sinw0 / (2 * q);
-    const ia0   = 1 / (1 + alpha / A);
-    this.b0 =  (1 + alpha * A) * ia0;
-    this.b1 =  -2 * cosw0      * ia0;
-    this.b2 =  (1 - alpha * A) * ia0;
-    this.a1 =  -2 * cosw0      * ia0; // same as b1 in peaking
-    this.a2 =  (1 - alpha / A) * ia0;
-    this.active = true;
-  }
-
-  // filter_ls_coefs — low-shelf (band 0)
-  setLowShelf(cutoff: number, q: number, gainDb: number, sr: number): void {
-    if (gainDb === 0) { this.bypass(); return; }
-    const A     = Math.pow(10, gainDb / 40);
-    const w0    = (2 * Math.PI * cutoff) / sr;
-    const sinw0 = Math.sin(w0), cosw0 = Math.cos(w0);
-    const alpha = sinw0 / (2 * q);
-    const s2    = 2 * Math.sqrt(A) * alpha;
-    const ia0   = 1 / ((A + 1) + (A - 1) * cosw0 + s2);
-    this.b0 =  A * ((A + 1) - (A - 1) * cosw0 + s2) * ia0;
-    this.b1 =  2 * A * ((A - 1) - (A + 1) * cosw0)  * ia0;
-    this.b2 =  A * ((A + 1) - (A - 1) * cosw0 - s2) * ia0;
-    this.a1 =  -2 * ((A - 1) + (A + 1) * cosw0)     * ia0;
-    this.a2 =  ((A + 1) + (A - 1) * cosw0 - s2)     * ia0;
-    this.active = true;
-  }
-
-  // filter_hs_coefs — high-shelf (band 9)
-  setHighShelf(cutoff: number, q: number, gainDb: number, sr: number): void {
-    if (gainDb === 0) { this.bypass(); return; }
-    const A     = Math.pow(10, gainDb / 40);
-    const w0    = (2 * Math.PI * cutoff) / sr;
-    const sinw0 = Math.sin(w0), cosw0 = Math.cos(w0);
-    const alpha = sinw0 / (2 * q);
-    const s2    = 2 * Math.sqrt(A) * alpha;
-    const ia0   = 1 / ((A + 1) - (A - 1) * cosw0 + s2);
-    this.b0 =  A * ((A + 1) + (A - 1) * cosw0 + s2)  * ia0;
-    this.b1 =  -2 * A * ((A - 1) + (A + 1) * cosw0)  * ia0;
-    this.b2 =  A * ((A + 1) + (A - 1) * cosw0 - s2)  * ia0;
-    this.a1 =  2 * ((A - 1) - (A + 1) * cosw0)       * ia0;
-    this.a2 =  ((A + 1) - (A - 1) * cosw0 - s2)      * ia0;
-    this.active = true;
-  }
-
-  bypass(): void {
-    this.b0 = 1; this.b1 = 0; this.b2 = 0;
-    this.a1 = 0; this.a2 = 0;
-    this.active = false;
-  }
-
-  flush(): void { this.h.fill(0); }
-
-  // Direct-form-1 — filter_process (generic C fallback)
-  // y[n] = b0*x + b1*x[n-1] + b2*x[n-2] - a1*y[n-1] - a2*y[n-2]
-  tick(x: number, ch: 0 | 1): number {
-    const o = ch << 2; // ch * 4
-    const h = this.h;
-    const y = this.b0 * x
-            + this.b1 * h[o]     // x[n-1]
-            + this.b2 * h[o + 1] // x[n-2]
-            - this.a1 * h[o + 2] // y[n-1]
-            - this.a2 * h[o + 3];// y[n-2]
-    h[o + 1] = h[o];     h[o]     = x;
-    h[o + 3] = h[o + 2]; h[o + 2] = y;
-    return y;
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// RingBuffer
-// Port of the enqueue / dequeue helpers at the bottom of dsp_filter.c.
-// Physical size is fixed at construction; 'len' passed per-call sets the active
-// wrap boundary so that the same object can serve different logical delay sizes.
-// ─────────────────────────────────────────────────────────────────────────────
-class RingBuffer {
-  private readonly buf: Float32Array;
-  private r = 0;
-  private w = 0;
-
-  constructor(maxSize: number) {
-    this.buf = new Float32Array(maxSize);
-  }
-
-  flush(): void { this.buf.fill(0); this.r = 0; this.w = 0; }
-
-  dequeue(len: number): number {
-    const v = this.buf[this.r];
-    if (++this.r >= len) this.r = 0;
-    return v;
-  }
-
-  enqueue(v: number, len: number): void {
-    this.buf[this.w] = v;
-    if (++this.w >= len) this.w = 0;
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Equalizer
-// Port of eq.c: 10-band EQ.
-//   band 0          → low-shelf  (filter_ls_coefs)
-//   bands 1–8       → peaking    (filter_pk_coefs)
-//   band 9          → high-shelf (filter_hs_coefs)
-// Bands with gain === 0 are bypassed (active = false) at zero CPU cost.
-// ─────────────────────────────────────────────────────────────────────────────
-const EQ_BANDS = 10;
-
-class Equalizer {
-  private readonly filters: BiquadFilter[] = Array.from(
-    { length: EQ_BANDS }, () => new BiquadFilter(),
-  );
-  private precut     = 1.0;   // linear gain (< 1 for headroom)
-  private sampleRate = 44100;
-  private readonly cfg: BandConfig[] = Array.from(
-    { length: EQ_BANDS }, () => ({ cutoff: 1000, q: 0.7, gain: 0 }),
-  );
-
-  setSampleRate(sr: number): void {
-    this.sampleRate = sr;
-    this.rebuildAll();
-  }
-
-  setBand(band: number, cutoff: number, q: number, gain: number): void {
-    if (band < 0 || band >= EQ_BANDS) return;
-    this.cfg[band] = { cutoff, q, gain };
-    this.rebuild(band);
-  }
-
-  // precut_db: positive value reduces pre-EQ gain to prevent clipping on boosts
-  setPrecut(precutDb: number): void {
-    this.precut = Math.pow(10, -Math.abs(precutDb) / 20);
-  }
-
-  flush(): void { this.filters.forEach(f => f.flush()); }
-
-  // Process one stereo sample pair in range [-1, 1]; returns [left, right].
-  process(left: number, right: number): [number, number] {
-    left  *= this.precut;
-    right *= this.precut;
-    for (let b = 0; b < EQ_BANDS; b++) {
-      const f = this.filters[b];
-      if (!f.active) continue;
-      left  = f.tick(left,  0);
-      right = f.tick(right, 1);
-    }
-    return [left, right];
-  }
-
-  private rebuild(band: number): void {
-    const { cutoff, q, gain } = this.cfg[band];
-    const f  = this.filters[band];
-    const sr = this.sampleRate;
-    if (band === 0)
-      f.setLowShelf(cutoff, q, gain, sr);
-    else if (band === EQ_BANDS - 1)
-      f.setHighShelf(cutoff, q, gain, sr);
-    else
-      f.setPeaking(cutoff, q, gain, sr);
-  }
-
-  private rebuildAll(): void {
-    for (let b = 0; b < EQ_BANDS; b++) this.rebuild(b);
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Surround
-// Port of surround.c: Haas-effect pseudo-surround.
-//
-// Five delay lines carry frequency-weighted copies of the right channel with
-// different delay lengths, creating a spacious stereo image without changing
-// the mono content. The left channel receives an inverted, delayed crossfeed
-// signal to further widen the image.
-//
-// Delay sizing note: the C source uses DLY_1US = 90900, calibrated for ~90.9 kHz
-// internal rate. This port computes delay directly from sampleRate so it is
-// sample-rate agnostic (44100, 48000, 96000 Hz all work correctly).
-// ─────────────────────────────────────────────────────────────────────────────
-const SURROUND_BUF_MAX = 8192; // fits 30 ms at up to 192 kHz
-
-class Surround {
-  private sampleRate = 44100;
-  private delayMs    = 15;
-  private mix        = 1.0;   // 0 (dry) … 1 (wet)
-  private balance    = 0;     // -100 … +100
-  private sideOnly   = false;
-  private cutoffL    = 320;   // Hz — bass/voice crossover  (C: cutoff_l, fx2)
-  private cutoffH    = 3400;  // Hz — voice/treble crossover (C: cutoff_h, fx1)
-
-  // Derived per-update
-  private dly = 0;
-  private tc1 = 0; // tcoef1 = cutoffL / sr
-  private tc2 = 0; // tcoef2 = cutoffH / sr
-  private bc  = 0; // bcoef  = (cutoffL/2) / sr
-  private hc  = 0; // hcoef  = (cutoffH*2) / sr
-
-  // Five independent ring-buffer delay lines
-  private readonly b0 = new RingBuffer(SURROUND_BUF_MAX); // dly >> 3
-  private readonly bb = new RingBuffer(SURROUND_BUF_MAX); // dly >> 2
-  private readonly hh = new RingBuffer(SURROUND_BUF_MAX); // dly >> 1
-  private readonly b2 = new RingBuffer(SURROUND_BUF_MAX); // dly
-  private readonly cl = new RingBuffer(SURROUND_BUF_MAX); // dly (crossfeed left)
-
-  constructor() { this.update(); }
-
-  setSampleRate(sr: number): void  { this.sampleRate = sr;                                    this.update(); }
-  setDelay(ms: number): void       { this.delayMs    = Math.max(5, Math.min(30, ms));          this.update(); }
-  setMix(pct: number): void        { this.mix        = Math.max(0, Math.min(100, pct)) / 100;               }
-  setBalance(b: number): void      { this.balance    = Math.max(-100, Math.min(100, b));                     }
-  setSideOnly(v: boolean): void    { this.sideOnly   = v;                                                    }
-  setCutoffs(low: number, high: number): void { this.cutoffL = low; this.cutoffH = high; this.update(); }
-
-  flush(): void {
-    this.b0.flush(); this.bb.flush(); this.hh.flush();
-    this.b2.flush(); this.cl.flush();
-  }
-
-  // Mirrors surround_update_filter + surround_set_delay in surround.c.
-  private update(): void {
-    const sr  = this.sampleRate;
-    this.dly  = Math.max(1, Math.round((this.delayMs / 1000) * sr));
-    this.tc1  = this.cutoffL / sr;
-    this.tc2  = this.cutoffH / sr;
-    this.bc   = (this.cutoffL / 2) / sr;
-    this.hc   = (this.cutoffH * 2) / sr;
-    this.flush();
-  }
-
-  // Per-sample processing — mirrors the loop body of surround_process().
-  process(left: number, right: number): [number, number] {
-    const { dly, tc1, tc2, bc, hc } = this;
-    const d8 = Math.max(1, dly >> 3);
-    const d4 = Math.max(1, dly >> 2);
-    const d2 = Math.max(1, dly >> 1);
-
-    let temp0: number, temp1: number;
-
-    if (!this.sideOnly) {
-      temp0 = left;
-      temp1 = right * tc1 - right * tc2; // voice-band weighted copy
-    } else {
-      const side = left - right;
-      temp0 =  side * 0.5;
-      temp1 = -side * tc1 * 0.5 - (-side) * tc2 * 0.5;
-    }
-
-    // Inverted crossfeed: adds delayed, negated fraction to the left channel
-    const cx = temp1 * 0.35;
-    temp0 += this.cl.dequeue(dly);
-    this.cl.enqueue(-cx, dly);
-
-    // 1/8 delay — high-pass of right at cutoffL (~320 Hz)
-    let x = right * (1 - tc1);
-    temp1 += this.b0.dequeue(d8);
-    this.b0.enqueue(x, d8);
-
-    // Attenuate below half of cutoffL (~160 Hz)
-    temp1 = temp1 * bc;
-
-    // 1/4 delay — high-pass of right at cutoffL/2 (~160 Hz)
-    x      = right * (1 - bc);
-    temp1 += this.bb.dequeue(d4);
-    this.bb.enqueue(x, d4);
-
-    // Full delay — band above cutoffH (~3400 Hz)
-    x      = right * tc2;
-    temp1 += this.b2.dequeue(dly);
-    this.b2.enqueue(x, dly);
-
-    // 1/2 delay direction trick — band above 2×cutoffH (~6800 Hz)
-    temp1  = temp1 * (1 - hc);
-    x      = right * hc;
-    temp1 += this.hh.dequeue(d2);
-    this.hh.enqueue(x, d2);
-
-    // Balance
-    const bal = this.balance;
-    if (bal > 0) {
-      if (!this.sideOnly) {
-        temp0 -= (temp0 * bal) / 200;
-        temp1 += (temp1 * bal) / 200;
-      } else {
-        temp0 += (temp0 * bal) / 200;
-        temp1 -= (temp1 * bal) / 200;
-      }
-    }
-
-    // Re-add mono (mid) content in side-only mode
-    if (this.sideOnly) {
-      const mid = left * 0.5 + right * 0.5;
-      temp0 += mid;
-      temp1 += mid;
-    }
-
-    // Dry/wet mix
-    const wet = this.mix;
-    if (wet >= 1) return [temp0, temp1];
-    const dry = 1 - wet;
-    return [left * dry + temp0 * wet, right * dry + temp1 * wet];
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// RockboxDSPProcessor
-// ─────────────────────────────────────────────────────────────────────────────
-class RockboxDSPProcessor extends AudioWorkletProcessor {
-  private readonly eq       = new Equalizer();
-  private readonly surround = new Surround();
-  private eqOn   = false;
-  private surrOn = false;
-  private lastSr = -1;
-
-  constructor() {
-    super();
-    this.port.onmessage = ({ data }: MessageEvent<DspMessage>) => this.recv(data);
-  }
-
-  private recv(msg: DspMessage): void {
-    switch (msg.type) {
-      case 'eq.enable':       this.eqOn           = msg.value;                             break;
-      case 'eq.band':         this.eq.setBand(msg.band, msg.cutoff, msg.q, msg.gain);      break;
-      case 'eq.precut':       this.eq.setPrecut(msg.value);                                break;
-      case 'eq.flush':        this.eq.flush();                                             break;
-      case 'surround.enable': this.surrOn         = msg.value;                             break;
-      case 'surround.delay':  this.surround.setDelay(msg.value);                           break;
-      case 'surround.mix':    this.surround.setMix(msg.value);                             break;
-      case 'surround.balance':this.surround.setBalance(msg.value);                         break;
-      case 'surround.sideOnly':this.surround.setSideOnly(msg.value);                       break;
-      case 'surround.cutoffs':this.surround.setCutoffs(msg.low, msg.high);                 break;
-      case 'surround.flush':  this.surround.flush();                                       break;
-    }
-  }
-
-  process(inputs: Float32Array[][], outputs: Float32Array[][]): boolean {
-    const inp = inputs[0], out = outputs[0];
-    if (!inp?.[0]?.length) return true;
-
-    if (this.lastSr !== sampleRate) {
-      this.lastSr = sampleRate;
-      this.eq.setSampleRate(sampleRate);
-      this.surround.setSampleRate(sampleRate);
-    }
-
-    const inL  = inp[0];
-    const inR  = inp[1] ?? inp[0];
-    const outL = out[0];
-    const outR = out[1] ?? null;
-    const n    = inL.length;
-
-    for (let i = 0; i < n; i++) {
-      let l = inL[i], r = inR[i];
-
-      if (this.eqOn)   [l, r] = this.eq.process(l, r);
-      if (this.surrOn) [l, r] = this.surround.process(l, r);
-
-      outL[i] = l;
-      if (outR) outR[i] = r;
-    }
-
-    return true;
-  }
-}
-
-registerProcessor('rockbox-dsp', RockboxDSPProcessor);
diff --git a/apps/web-mobile/src/dsp/rockbox-dsp.ts b/apps/web-mobile/src/dsp/rockbox-dsp.ts
deleted file mode 100644
index 6129d4e4..00000000
--- a/apps/web-mobile/src/dsp/rockbox-dsp.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * rockbox-dsp.ts
- *
- * Main-thread TypeScript wrapper for the Rockbox DSP AudioWorklet.
- * Provides a typed API over the message channel to rockbox-dsp-processor.ts.
- *
- * Usage:
- *   const dsp = await RockboxDSP.create(audioCtx);
- *
- *   // Insert in the audio graph
- *   sourceNode.connect(dsp.node);
- *   dsp.node.connect(audioCtx.destination);
- *
- *   // 10-band EQ (band 0 = low-shelf, 1-8 = peaking, 9 = high-shelf)
- *   dsp.enableEQ(true);
- *   dsp.setEqBand(0, { cutoff: 60,   q: 0.7, gain:  6 }); // low shelf +6 dB
- *   dsp.setEqBand(5, { cutoff: 1000, q: 1.0, gain: -3 }); // 1 kHz -3 dB
- *   dsp.setEqBand(9, { cutoff: 8000, q: 0.7, gain:  4 }); // high shelf +4 dB
- *
- *   // Haas surround
- *   dsp.enableSurround(true);
- *   dsp.setSurroundDelay(15);
- *   dsp.setSurroundMix(80);
- */
-
-export interface EqBandOptions {
-  cutoff: number; // Hz — centre / shelf frequency
-  q?: number;     // Q factor (default 0.7)
-  gain: number;   // dB — positive = boost, negative = cut
-}
-
-export interface SurroundOptions {
-  delayMs?: number;   // 5–30 ms  (default 15)
-  mix?: number;       // 0–100 %  (default 100)
-  balance?: number;   // -100…+100 (default 0)
-  sideOnly?: boolean; // process side signal only (default false)
-  cutoffL?: number;   // bass/voice crossover Hz  (default 320)
-  cutoffH?: number;   // voice/treble crossover Hz (default 3400)
-}
-
-export class RockboxDSP {
-  readonly node: AudioWorkletNode;
-
-  private constructor(node: AudioWorkletNode) {
-    this.node = node;
-  }
-
-  /**
-   * Load the processor module and create the DSP node.
-   * @param ctx  AudioContext to attach the node to.
-   * @param processorUrl  URL of the compiled rockbox-dsp-processor.js file.
-   */
-  static async create(
-    ctx: AudioContext,
-    processorUrl = './rockbox-dsp-processor.js',
-  ): Promise<RockboxDSP> {
-    await ctx.audioWorklet.addModule(processorUrl);
-    const node = new AudioWorkletNode(ctx, 'rockbox-dsp', {
-      numberOfInputs:    1,
-      numberOfOutputs:   1,
-      outputChannelCount:[2],
-    });
-    return new RockboxDSP(node);
-  }
-
-  private send(msg: object): void {
-    this.node.port.postMessage(msg);
-  }
-
-  // ── EQ ────────────────────────────────────────────────────────────────────
-
-  /** Turn the 10-band EQ on or off. */
-  enableEQ(on = true): this {
-    this.send({ type: 'eq.enable', value: on });
-    return this;
-  }
-
-  /**
-   * Configure one EQ band.
-   * @param band  0 = low-shelf · 1-8 = peaking · 9 = high-shelf
-   */
-  setEqBand(band: number, { cutoff, q = 0.7, gain }: EqBandOptions): this {
-    this.send({ type: 'eq.band', band, cutoff, q, gain });
-    return this;
-  }
-
-  /**
-   * Apply all 10 bands at once.
-   * Missing bands are left at their current setting.
-   */
-  setEqBands(bands: Partial<Record<number, EqBandOptions>>): this {
-    for (const [key, opts] of Object.entries(bands)) {
-      if (opts) this.setEqBand(Number(key), opts);
-    }
-    return this;
-  }
-
-  /**
-   * Pre-EQ gain reduction to prevent clipping on heavy boosts.
-   * @param precutDb  Positive value = reduce gain (e.g. 6 → −6 dB headroom).
-   */
-  setEqPrecut(precutDb: number): this {
-    this.send({ type: 'eq.precut', value: precutDb });
-    return this;
-  }
-
-  /** Clear EQ filter histories (useful after a seek or source change). */
-  flushEQ(): this {
-    this.send({ type: 'eq.flush' });
-    return this;
-  }
-
-  // ── Surround ──────────────────────────────────────────────────────────────
-
-  /** Turn the Haas surround effect on or off. */
-  enableSurround(on = true): this {
-    this.send({ type: 'surround.enable', value: on });
-    return this;
-  }
-
-  /**
-   * Delay length of the surround effect.
-   * @param ms  5–30 ms (clamped). Longer = wider perceived stage.
-   */
-  setSurroundDelay(ms: number): this {
-    this.send({ type: 'surround.delay', value: ms });
-    return this;
-  }
-
-  /**
-   * Wet/dry mix of the surround effect.
-   * @param pct  0 (fully dry) … 100 (fully wet).
-   */
-  setSurroundMix(pct: number): this {
-    this.send({ type: 'surround.mix', value: pct });
-    return this;
-  }
-
-  /**
-   * Left/right balance within the surround output.
-   * @param b  -100 (push left) … 0 (centre) … +100 (push right).
-   */
-  setSurroundBalance(b: number): this {
-    this.send({ type: 'surround.balance', value: b });
-    return this;
-  }
-
-  /**
-   * When true, the Haas effect is applied only to the stereo side signal;
-   * the mono centre content passes through unmodified.
-   */
-  setSurroundSideOnly(v: boolean): this {
-    this.send({ type: 'surround.sideOnly', value: v });
-    return this;
-  }
-
-  /**
-   * Crossover frequencies used to route different bands to different delays.
-   * @param low   Bass/voice crossover in Hz (default 320).
-   * @param high  Voice/treble crossover in Hz (default 3400).
-   */
-  setSurroundCutoffs(low: number, high: number): this {
-    this.send({ type: 'surround.cutoffs', low, high });
-    return this;
-  }
-
-  /**
-   * Apply multiple surround settings at once.
-   */
-  configureSurround(opts: SurroundOptions): this {
-    if (opts.delayMs   !== undefined) this.setSurroundDelay(opts.delayMs);
-    if (opts.mix       !== undefined) this.setSurroundMix(opts.mix);
-    if (opts.balance   !== undefined) this.setSurroundBalance(opts.balance);
-    if (opts.sideOnly  !== undefined) this.setSurroundSideOnly(opts.sideOnly);
-    if (opts.cutoffL !== undefined || opts.cutoffH !== undefined)
-      this.setSurroundCutoffs(opts.cutoffL ?? 320, opts.cutoffH ?? 3400);
-    return this;
-  }
-
-  /** Clear surround delay-line histories (useful after a seek or source change). */
-  flushSurround(): this {
-    this.send({ type: 'surround.flush' });
-    return this;
-  }
-
-  /** Flush both EQ and surround histories. */
-  flush(): this {
-    return this.flushEQ().flushSurround();
-  }
-
-  /** Connect a source node → DSP → destination in one call. */
-  connect(source: AudioNode, destination: AudioNode): this {
-    source.connect(this.node);
-    this.node.connect(destination);
-    return this;
-  }
-
-  /** Disconnect and clean up. */
-  disconnect(): void {
-    this.node.disconnect();
-  }
-}
diff --git a/apps/web-mobile/src/hooks/useRockboxDSP.ts b/apps/web-mobile/src/hooks/useRockboxDSP.ts
deleted file mode 100644
index 77252880..00000000
--- a/apps/web-mobile/src/hooks/useRockboxDSP.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useAtomValue } from "jotai";
-import { useEffect, useRef, type RefObject } from "react";
-import { eqBandsAtom, eqEnabledAtom, EQ_Q } from "../atoms/equalizer";
-
-interface AudioGraph {
-  ctx: AudioContext;
-  filters: BiquadFilterNode[];
-}
-
-export function useRockboxDSP(audioRef: RefObject<HTMLAudioElement | null>) {
-  const eqEnabled = useAtomValue(eqEnabledAtom);
-  const eqBands = useAtomValue(eqBandsAtom);
-  const graphRef = useRef<AudioGraph | null>(null);
-
-  // Always-fresh refs so the play-event closure sees the latest EQ state.
-  const eqEnabledRef = useRef(eqEnabled);
-  const eqBandsRef = useRef(eqBands);
-  eqEnabledRef.current = eqEnabled;
-  eqBandsRef.current = eqBands;
-
-  // Build the Web Audio graph on the first play event.
-  //
-  // Why on "play" and not on EQ-enable:
-  //   - iOS Safari requires AudioContext creation to happen synchronously
-  //     inside a user-gesture call stack. useEffect runs after paint, outside
-  //     that stack. The play-button tap fires "play" synchronously, giving us
-  //     the gesture context we need.
-  //
-  // Why crossOrigin="anonymous" is required on the <audio> element:
-  //   - Without it the Web Audio spec silently mutes the graph output for
-  //     cross-origin media while still playing audio through the default sink.
-  //     The filter chain exists but processes silence — hence "EQ does nothing".
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const init = () => {
-      if (graphRef.current) return;
-      try {
-        const ctx = new AudioContext();
-        ctx.resume().catch(() => {});
-
-        const source = ctx.createMediaElementSource(audio);
-        const bands = eqBandsRef.current;
-
-        const filters: BiquadFilterNode[] = bands.map((band, i) => {
-          const f = ctx.createBiquadFilter();
-          if (i === 0) {
-            f.type = "lowshelf";
-            f.Q.value = 0.7;
-          } else if (i === bands.length - 1) {
-            f.type = "highshelf";
-            f.Q.value = 0.7;
-          } else {
-            f.type = "peaking";
-            f.Q.value = EQ_Q;
-          }
-          f.frequency.value = band.cutoff;
-          f.gain.value = 0;
-          return f;
-        });
-
-        source.connect(filters[0]);
-        for (let i = 0; i < filters.length - 1; i++) {
-          filters[i].connect(filters[i + 1]);
-        }
-        filters[filters.length - 1].connect(ctx.destination);
-
-        graphRef.current = { ctx, filters };
-
-        // Apply whatever EQ state is active at init time.
-        const enabled = eqEnabledRef.current;
-        const b = eqBandsRef.current;
-        filters.forEach((f, idx) => {
-          f.gain.value = enabled ? b[idx].gain : 0;
-        });
-      } catch (err) {
-        console.warn("[EQ] Web Audio init failed:", err);
-      }
-    };
-
-    const onPlay = () => {
-      graphRef.current?.ctx.resume().catch(() => {});
-      init();
-    };
-
-    audio.addEventListener("play", onPlay);
-    if (!audio.paused) init();
-
-    return () => {
-      audio.removeEventListener("play", onPlay);
-      graphRef.current?.ctx.close().catch(() => {});
-      graphRef.current = null;
-    };
-  }, [audioRef]);
-
-  // Real-time sync: push every EQ change to the filter parameters.
-  useEffect(() => {
-    const graph = graphRef.current;
-    if (!graph) return;
-    graph.filters.forEach((filter, i) => {
-      filter.gain.value = eqEnabled ? eqBands[i].gain : 0;
-    });
-  }, [eqEnabled, eqBands]);
-}
diff --git a/apps/web-mobile/src/hooks/useRockboxEngine.ts b/apps/web-mobile/src/hooks/useRockboxEngine.ts
new file mode 100644
index 00000000..86a56adb
--- /dev/null
+++ b/apps/web-mobile/src/hooks/useRockboxEngine.ts
@@ -0,0 +1,148 @@
+import { useAtomValue, useSetAtom } from "jotai";
+import { useEffect } from "react";
+import {
+  crossfadeDurationAtom,
+  crossfadeEnabledAtom,
+  eqBandsAtom,
+  eqEnabledAtom,
+} from "../atoms/equalizer";
+import { nowPlayingAtom } from "../atoms/nowpaying";
+import { playerAtom } from "../atoms/player";
+import { queueAtom, queueIndexAtom, type QueueTrack } from "../atoms/queue";
+import {
+  getRockboxPlayer,
+  publishCrossfade,
+  publishEq,
+  trackForUrl,
+  uploadIdFromUrl,
+} from "../lib/audio/rockbox-engine";
+
+// useRockboxEngine — bridge between the in-browser rockbox-wasm engine and the
+// app's jotai atoms. Mount once (in MiniPlayer). Replaces the old <audio>
+// element event wiring + custom DSP worklet.
+
+function urlToQueueTrack(url: string): QueueTrack {
+  const known = trackForUrl(url);
+  if (known) return known;
+  return {
+    uploadId: uploadIdFromUrl(url) ?? url,
+    title: url.split("/").pop() ?? url,
+    artist: "",
+    albumArtist: "",
+    album: "",
+    albumArt: null,
+    duration: 0,
+    sha256: "",
+    songUri: "",
+    streamUrl: url,
+  };
+}
+
+export function useRockboxEngine() {
+  const player = useAtomValue(playerAtom);
+  const setNowPlaying = useSetAtom(nowPlayingAtom);
+  const setQueue = useSetAtom(queueAtom);
+  const setQueueIndex = useSetAtom(queueIndexAtom);
+  const setPlayer = useSetAtom(playerAtom);
+
+  // EQ + crossfade settings → engine (live + remembered for late init).
+  const eqEnabled = useAtomValue(eqEnabledAtom);
+  const eqBands = useAtomValue(eqBandsAtom);
+  const crossfadeEnabled = useAtomValue(crossfadeEnabledAtom);
+  const crossfadeDuration = useAtomValue(crossfadeDurationAtom);
+
+  useEffect(() => {
+    publishEq(eqEnabled, eqBands);
+  }, [eqEnabled, eqBands]);
+
+  useEffect(() => {
+    publishCrossfade(crossfadeEnabled, crossfadeDuration);
+  }, [crossfadeEnabled, crossfadeDuration]);
+
+  useEffect(() => {
+    if (player !== "upload") return;
+    const p = getRockboxPlayer();
+
+    const onTrack = (e: {
+      index: number;
+      url: string;
+      metadata: { title?: string; artist?: string; duration_ms?: number } | null;
+    }) => {
+      const known = trackForUrl(e.url);
+      const md = e.metadata;
+      setNowPlaying((prev) => ({
+        title: known?.title ?? md?.title ?? e.url.split("/").pop() ?? "",
+        artist: known?.artist ?? md?.artist ?? "",
+        artistUri: "",
+        songUri: known?.songUri ?? "",
+        albumUri: "",
+        duration: known?.duration ?? md?.duration_ms ?? prev?.duration ?? 0,
+        progress: 0,
+        albumArt: known?.albumArt ?? prev?.albumArt ?? undefined,
+        isPlaying: true,
+        sha256: known?.sha256 ?? "",
+        liked: prev?.liked ?? false,
+      }));
+      // NB: don't set the queue index here — the `track` event reports the
+      // index captured when the track started loading, which can be stale if
+      // the queue was reordered (background-fill) meanwhile. onStatus / onQueue
+      // carry the live index.
+    };
+
+    const onProgress = (e: {
+      state: "stopped" | "playing" | "paused";
+      elapsed_ms: number;
+      duration_ms: number;
+    }) => {
+      setNowPlaying((prev) =>
+        prev
+          ? {
+              ...prev,
+              progress: e.elapsed_ms,
+              duration: e.duration_ms || prev.duration,
+              isPlaying: e.state === "playing",
+            }
+          : prev,
+      );
+    };
+
+    // status: transport / queue-length / index. We deliberately do NOT clear
+    // nowPlaying/player here. The engine emits a `stopped, queue_len: 0` status
+    // while it boots (before setQueue runs); treating that as "playback ended"
+    // would null the optimistic now-playing AND flip player away — which
+    // detaches these very listeners, so audio keeps playing while the
+    // mini-player vanishes for good. The player stays visible while playing.
+    const onStatus = (e: {
+      state: "stopped" | "playing" | "paused";
+      index: number;
+      queue_len: number;
+    }) => {
+      if (e.index >= 0) setQueueIndex(e.index);
+      setNowPlaying((prev) =>
+        prev ? { ...prev, isPlaying: e.state === "playing" } : prev,
+      );
+    };
+
+    const onQueue = (e: { urls: string[]; index: number }) => {
+      setQueue(e.urls.map(urlToQueueTrack));
+      setQueueIndex(e.index);
+    };
+
+    p.on("track", onTrack);
+    p.on("progress", onProgress);
+    p.on("status", onStatus);
+    p.on("queue", onQueue);
+
+    if (p.queue.length) {
+      setQueue(p.queue.map(urlToQueueTrack));
+      setQueueIndex(p.state.index);
+    }
+
+    return () => {
+      p.off("track", onTrack);
+      p.off("progress", onProgress);
+      p.off("status", onStatus);
+      p.off("queue", onQueue);
+    };
+  }, [player, setNowPlaying, setQueue, setQueueIndex, setPlayer]);
+}
diff --git a/apps/web-mobile/src/hooks/useUploadPlayer.tsx b/apps/web-mobile/src/hooks/useUploadPlayer.tsx
index 229e763d..53f888ff 100644
--- a/apps/web-mobile/src/hooks/useUploadPlayer.tsx
+++ b/apps/web-mobile/src/hooks/useUploadPlayer.tsx
@@ -1,8 +1,20 @@
-import { useAtom, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback } from "react";
+import { InsertMode } from "rockbox-wasm";
 import { nowPlayingAtom } from "../atoms/nowpaying";
 import { playerAtom } from "../atoms/player";
 import { queueAtom, queueIndexAtom, type QueueTrack } from "../atoms/queue";
+import { ensureStreamToken } from "../api/uploads";
+import {
+  ensureRockboxReady,
+  registerTracks,
+  streamUrlFor,
+} from "../lib/audio/rockbox-engine";
+
+// useUploadPlayer — orchestrates the in-browser rockbox-wasm queue for the
+// "My Library" (upload) player. Playback + DSP + crossfade run locally in wasm;
+// there is no <audio> element, no HLS and no remote server. The queue atoms are
+// kept in sync by the engine's queue/status events (see useRockboxEngine).
 
 function toNowPlaying(track: QueueTrack) {
   return {
@@ -21,56 +33,69 @@ function toNowPlaying(track: QueueTrack) {
 }
 
 export function useUploadPlayer() {
-  const [queue, setQueue] = useAtom(queueAtom);
-  const [queueIndex, setQueueIndex] = useAtom(queueIndexAtom);
+  const queue = useAtomValue(queueAtom);
+  const queueIndex = useAtomValue(queueIndexAtom);
   const setNowPlaying = useSetAtom(nowPlayingAtom);
   const setPlayer = useSetAtom(playerAtom);
 
   const playNow = useCallback(
-    (tracks: QueueTrack[], startIndex = 0) => {
-      setQueue(tracks);
-      setQueueIndex(startIndex);
+    async (tracks: QueueTrack[], startIndex = 0) => {
+      if (!tracks.length) return;
       setNowPlaying(toNowPlaying(tracks[startIndex]));
       setPlayer("upload");
+      // Boot the engine FIRST, synchronously within the click's user gesture.
+      // Creating the AudioContext after an awaited network call (the stream
+      // token) lands outside the gesture, and Chrome then rejects the worklet
+      // load with "Unable to load a worklet's module".
+      const p = await ensureRockboxReady();
+      await ensureStreamToken();
+      registerTracks(tracks);
+      const urls = tracks.map(streamUrlFor);
+      // Start ONLY the chosen track so playback begins as fast as possible —
+      // the engine downloads/decodes just this one file.
+      p.setQueue([urls[startIndex]], true);
+      // Then fill the rest of the queue in the background. These are URL
+      // strings only: the engine fetches each subsequent track lazily when it's
+      // reached, so nothing else downloads up front. insert() renumbers the
+      // current index and never restarts the playing track, so the album keeps
+      // its natural order with the chosen track current.
+      const after = urls.slice(startIndex + 1);
+      const before = urls.slice(0, startIndex);
+      if (after.length) p.insert(after, InsertMode.PlayLast);
+      if (before.length) p.insert(before, InsertMode.Prepend);
     },
-    [setQueue, setQueueIndex, setNowPlaying, setPlayer],
+    [setNowPlaying, setPlayer],
   );
 
-  const playNext = useCallback(
-    (track: QueueTrack) => {
-      setQueue((prev) => {
-        const next = [...prev];
-        next.splice(queueIndex + 1, 0, track);
-        return next;
-      });
-    },
-    [queueIndex, setQueue],
-  );
+  const playNext = useCallback(async (track: QueueTrack) => {
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks([track]);
+    p.insert(streamUrlFor(track), InsertMode.PlayNext);
+  }, []);
 
-  const playLast = useCallback(
-    (track: QueueTrack) => {
-      setQueue((prev) => [...prev, track]);
-    },
-    [setQueue],
-  );
+  const playLast = useCallback(async (track: QueueTrack) => {
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks([track]);
+    p.insert(streamUrlFor(track), InsertMode.PlayLast);
+  }, []);
 
-  const playNextAll = useCallback(
-    (tracks: QueueTrack[]) => {
-      setQueue((prev) => {
-        const next = [...prev];
-        next.splice(queueIndex + 1, 0, ...tracks);
-        return next;
-      });
-    },
-    [queueIndex, setQueue],
-  );
+  const playNextAll = useCallback(async (tracks: QueueTrack[]) => {
+    if (!tracks.length) return;
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks(tracks);
+    p.insert(tracks.map(streamUrlFor), InsertMode.PlayNext);
+  }, []);
 
-  const playLastAll = useCallback(
-    (tracks: QueueTrack[]) => {
-      setQueue((prev) => [...prev, ...tracks]);
-    },
-    [setQueue],
-  );
+  const playLastAll = useCallback(async (tracks: QueueTrack[]) => {
+    if (!tracks.length) return;
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks(tracks);
+    p.insert(tracks.map(streamUrlFor), InsertMode.PlayLast);
+  }, []);
 
   return { queue, queueIndex, playNow, playNext, playLast, playNextAll, playLastAll };
 }
diff --git a/apps/web-mobile/src/hooks/useUploadScrobble.ts b/apps/web-mobile/src/hooks/useUploadScrobble.ts
index c998ffa6..b5b7802f 100644
--- a/apps/web-mobile/src/hooks/useUploadScrobble.ts
+++ b/apps/web-mobile/src/hooks/useUploadScrobble.ts
@@ -1,5 +1,5 @@
 import { useAtomValue } from "jotai";
-import { useEffect, useRef, type RefObject } from "react";
+import { useEffect, useRef } from "react";
 import { submitScrobble } from "../api/scrobbles";
 import { nowPlayingAtom } from "../atoms/nowpaying";
 import { playerAtom } from "../atoms/player";
@@ -8,117 +8,63 @@ import { consola } from "consola";
 
 // Last.fm scrobble rules:
 //   1. Track must be at least 30 seconds long.
-//   2. Must have listened for at least 30 seconds.
-//   3. Must have listened for min(50% of duration, 4 minutes).
+//   2. Must have listened for min(50% of duration, 4 minutes).
+//
+// Driven by the engine's progress (nowPlaying.progress/duration in ms) rather
+// than an <audio> element — the wasm engine is the playback source now.
 const MIN_TRACK_MS = 30_000;
-const MIN_LISTEN_MS = 30_000;
 const MAX_THRESHOLD_MS = 4 * 60_000;
 
-export function useUploadScrobble(audioRef: RefObject<HTMLAudioElement | null>) {
+export function useUploadScrobble() {
   const player = useAtomValue(playerAtom);
   const nowPlaying = useAtomValue(nowPlayingAtom);
   const queue = useAtomValue(queueAtom);
   const queueIndex = useAtomValue(queueIndexAtom);
 
-  // Always-fresh refs so event listeners never close over stale values.
-  const nowPlayingRef = useRef(nowPlaying);
-  const queueRef = useRef(queue);
-  const queueIndexRef = useRef(queueIndex);
-  nowPlayingRef.current = nowPlaying;
-  queueRef.current = queue;
-  queueIndexRef.current = queueIndex;
-
-  // Per-track scrobble state.
+  // sha256 (or title::artist) of the last track we submitted a scrobble for.
   const scrobbledRef = useRef<string | null>(null);
+  // Wall-clock time the current track started, for the scrobble timestamp.
   const startedAtRef = useRef<number>(Date.now());
-  const listeningMsRef = useRef<number>(0);
-  const playStartRef = useRef<number | null>(null);
-  const trackedSha256Ref = useRef<string | null>(null);
 
-  // Reset listening counters whenever the track changes.
-  const sha256 = nowPlaying?.sha256 ?? null;
+  // Reset the start clock whenever the playing track changes.
+  const trackKey = nowPlaying
+    ? nowPlaying.sha256 || `${nowPlaying.title}::${nowPlaying.artist}`
+    : null;
+  const prevTrackKeyRef = useRef<string | null>(null);
   useEffect(() => {
-    if (sha256 === trackedSha256Ref.current) return;
-    trackedSha256Ref.current = sha256;
-    listeningMsRef.current = 0;
-    playStartRef.current = null;
-    startedAtRef.current = Date.now();
-  }, [sha256]);
+    if (trackKey !== prevTrackKeyRef.current) {
+      prevTrackKeyRef.current = trackKey;
+      startedAtRef.current = Date.now();
+    }
+  }, [trackKey]);
 
-  // Wire up audio events — re-attach only when player mode changes.
   useEffect(() => {
-    if (player !== "upload") return;
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const onPlay = () => {
-      playStartRef.current = Date.now();
-    };
-
-    const onPause = () => {
-      if (playStartRef.current !== null) {
-        listeningMsRef.current += Date.now() - playStartRef.current;
-        playStartRef.current = null;
-      }
-    };
-
-    const onTimeUpdate = () => {
-      // Accumulate listening time on every tick.
-      if (playStartRef.current !== null) {
-        const now = Date.now();
-        listeningMsRef.current += now - playStartRef.current;
-        playStartRef.current = now;
-      }
-
-      const np = nowPlayingRef.current;
-      if (!np) return;
-
-      const { sha256: currentSha256, title, artist, albumArt, duration } = np;
-
-      if (scrobbledRef.current === currentSha256) return;
-
-      // Rule 1: track must be at least 30 s long.
-      if (duration < MIN_TRACK_MS) return;
-      // Rule 2: must have actually listened for at least 30 s.
-      if (listeningMsRef.current < MIN_LISTEN_MS) return;
-      // Rule 3: must have listened for min(50% of duration, 4 min).
-      const threshold = Math.min(duration * 0.5, MAX_THRESHOLD_MS);
-      if (listeningMsRef.current < threshold) return;
-
-      scrobbledRef.current = currentSha256;
-
-      const q = queueRef.current;
-      const idx = queueIndexRef.current;
-      const album = q[idx]?.album;
-      const albumArtist = q[idx]?.albumArtist ?? artist;
-
-      submitScrobble({
-        title,
-        artist,
-        albumArtist,
-        album,
-        albumArt,
-        duration,
-        timestamp: Math.floor(startedAtRef.current / 1000),
-      }).catch((err) => {
-        consola.warn("[scrobble] submit failed:", err);
-        scrobbledRef.current = null; // allow retry on next tick
-      });
-    };
-
-    audio.addEventListener("play", onPlay);
-    audio.addEventListener("pause", onPause);
-    audio.addEventListener("timeupdate", onTimeUpdate);
-
-    return () => {
-      // Flush any in-progress listening time before detaching.
-      if (playStartRef.current !== null) {
-        listeningMsRef.current += Date.now() - playStartRef.current;
-        playStartRef.current = null;
-      }
-      audio.removeEventListener("play", onPlay);
-      audio.removeEventListener("pause", onPause);
-      audio.removeEventListener("timeupdate", onTimeUpdate);
-    };
-  }, [player, audioRef]);
+    if (player !== "upload" || !nowPlaying) return;
+    const { sha256, title, artist, albumArt, duration, progress } = nowPlaying;
+
+    const dedupeKey = sha256 || `${title}::${artist}`;
+    if (scrobbledRef.current === dedupeKey) return;
+
+    if (duration < MIN_TRACK_MS) return;
+    const threshold = Math.min(duration * 0.5, MAX_THRESHOLD_MS);
+    if (progress < threshold) return;
+
+    scrobbledRef.current = dedupeKey;
+
+    const album = queue[queueIndex]?.album;
+    const albumArtist = queue[queueIndex]?.albumArtist ?? artist;
+
+    submitScrobble({
+      title,
+      artist,
+      albumArtist,
+      album,
+      albumArt,
+      duration,
+      timestamp: Math.floor(startedAtRef.current / 1000),
+    }).catch((err) => {
+      consola.warn("[scrobble] submit failed:", err);
+      scrobbledRef.current = null; // allow retry on next tick
+    });
+  }, [player, nowPlaying, queue, queueIndex]);
 }
diff --git a/apps/web-mobile/src/lib/audio/rockbox-engine.ts b/apps/web-mobile/src/lib/audio/rockbox-engine.ts
new file mode 100644
index 00000000..5d0085bb
--- /dev/null
+++ b/apps/web-mobile/src/lib/audio/rockbox-engine.ts
@@ -0,0 +1,115 @@
+import { CrossfadeMode, RockboxPlayer } from "rockbox-wasm";
+import { getStreamUrl } from "../../api/uploads";
+import { EQ_BANDS_HZ, EQ_Q, type EqBandSetting } from "../../atoms/equalizer";
+import type { QueueTrack } from "../../atoms/queue";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// In-browser Rockbox engine (decoders + DSP in WebAssembly).
+//
+// This is the ONE audible path for uploaded ("My Library") tracks. It replaces
+// the old <audio> element + custom DSP AudioWorklet + WAV-transcode fallback:
+// decoding (FLAC/ALAC/etc.), the 10-band EQ, crossfade and the queue all run
+// locally in the browser now. Nothing here streams via HLS or talks to a
+// remote rockbox server.
+//
+// Runtime assets (core/worker/worklet) are served from /rockbox/* — see the
+// cpSync step in vite.config.ts.
+// ─────────────────────────────────────────────────────────────────────────────
+
+let player: RockboxPlayer | null = null;
+
+/** The most recent EQ + crossfade snapshot published from the atoms. Held so a
+ *  late-booting engine (init runs on a user gesture) adopts them on init(). */
+let latestEq: { enabled: boolean; bands: EqBandSetting[] } | null = null;
+let latestCrossfade: { enabled: boolean; durationSec: number } | null = null;
+
+/** Lazy singleton. Cheap to construct; `init()` boots the AudioContext so it
+ *  must be reached from a user gesture (see ensureRockboxReady). */
+export function getRockboxPlayer(): RockboxPlayer {
+  if (!player) player = new RockboxPlayer({ baseUrl: "/rockbox" });
+  return player;
+}
+
+/** Boot the engine if needed (idempotent). Call from a user gesture. */
+export async function ensureRockboxReady(): Promise<RockboxPlayer> {
+  const p = getRockboxPlayer();
+  if (!p.ready) {
+    await p.init();
+    // Adopt whatever settings were last published (the engine may have booted
+    // after they loaded), so a fresh AudioContext starts with the user's EQ.
+    if (latestEq) applyEq(p, latestEq.enabled, latestEq.bands);
+    if (latestCrossfade)
+      applyCrossfade(p, latestCrossfade.enabled, latestCrossfade.durationSec);
+  }
+  return p;
+}
+
+// ── Track metadata registry ──────────────────────────────────────────────────
+//
+// The wasm queue is a list of URLs — it has no metadata. Map the EXACT stream
+// URL we enqueue back to the rich QueueTrack it came from. The engine stores +
+// echoes queue URLs verbatim (queue/track events), so an exact-string key
+// round-trips reliably for any URL shape (`.../uploads/<id>/stream?token=…`,
+// `.../stream?u=…`, etc.). Keying on a path-parsed uploadId silently missed
+// `?u=`-style URLs and showed raw URLs instead of titles.
+
+const registry = new Map<string, QueueTrack>();
+
+/** Last-resort label for URLs we didn't enqueue ourselves. */
+export function uploadIdFromUrl(url: string): string | null {
+  const m = url.match(/\/uploads\/([^/]+)\/stream/);
+  return m ? m[1] : null;
+}
+
+export function streamUrlFor(track: QueueTrack): string {
+  return track.streamUrl ?? getStreamUrl(track.uploadId);
+}
+
+export function registerTracks(tracks: QueueTrack[]): void {
+  tracks.forEach((t) => registry.set(streamUrlFor(t), t));
+}
+
+export function trackForUrl(url: string): QueueTrack | undefined {
+  return registry.get(url);
+}
+
+// ── DSP settings → engine ────────────────────────────────────────────────────
+
+/** Apply the 10-band EQ. Gains are in whole dB (matches the eqBands atom). */
+export function applyEq(
+  p: RockboxPlayer,
+  enabled: boolean,
+  bands: EqBandSetting[],
+): void {
+  p.setEqEnabled(enabled);
+  // Band centre frequencies are fixed by index (the 10 rockbox bands) — never
+  // trust a cutoff that may have been persisted from an older band table. Only
+  // the gain is user data.
+  bands.forEach((b, i) =>
+    p.setEqBand(i, EQ_BANDS_HZ[i] ?? b.cutoff, EQ_Q, b.gain),
+  );
+}
+
+/** Apply Rockbox crossfade. `Always` when enabled (fade every track change). */
+export function applyCrossfade(
+  p: RockboxPlayer,
+  enabled: boolean,
+  durationSec: number,
+): void {
+  p.setCrossfade(enabled ? CrossfadeMode.Always : CrossfadeMode.Off, {
+    fadeInDuration: durationSec,
+    fadeOutDuration: durationSec,
+  });
+}
+
+/** Publish EQ state: remember it (for a late init) and push it live if ready. */
+export function publishEq(enabled: boolean, bands: EqBandSetting[]): void {
+  latestEq = { enabled, bands };
+  if (player?.ready) applyEq(player, enabled, bands);
+}
+
+/** Publish crossfade state: remember + push live if the engine is running. */
+export function publishCrossfade(enabled: boolean, durationSec: number): void {
+  latestCrossfade = { enabled, durationSec };
+  if (player?.ready) applyCrossfade(player, enabled, durationSec);
+}
diff --git a/apps/web-mobile/src/vite-env.d.ts b/apps/web-mobile/src/vite-env.d.ts
index ed3fe5db..11f02fe2 100644
--- a/apps/web-mobile/src/vite-env.d.ts
+++ b/apps/web-mobile/src/vite-env.d.ts
@@ -1,6 +1 @@
 /// <reference types="vite/client" />
-
-declare module "audio-type" {
-  type AudioFormat = "mp3" | "wav" | "flac" | "aac" | "m4a" | "oga" | "opus" | "webm" | "aiff" | "caf" | "qoa" | "mid" | "wma" | "amr";
-  export default function audioType(buf: Uint8Array | ArrayBuffer): AudioFormat | undefined;
-}
diff --git a/apps/web-mobile/vite.config.ts b/apps/web-mobile/vite.config.ts
index 209aa3b4..9ab1e620 100644
--- a/apps/web-mobile/vite.config.ts
+++ b/apps/web-mobile/vite.config.ts
@@ -1,8 +1,31 @@
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react-swc";
+import { cpSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
 
+// rockbox-wasm's runtime (core + decoder worker + audio worklet) is fetched by
+// URL at runtime, so it can't go through the module graph. Mirror the package
+// dist into public/rockbox — served at /rockbox/*, which is the RockboxPlayer
+// baseUrl (see src/lib/audio/rockbox-engine.ts). Vite then copies public/ into
+// the build output, so the assets ship at dist/rockbox/* for production.
+//
+// Resolve via createRequire (works on every Node version + in CI) rather than
+// import.meta.resolve, whose sync form is only stable on Node 20.6+ — an older
+// CI Node would otherwise silently skip the copy and 404 the worklet in prod.
+const require = createRequire(import.meta.url);
+// Resolve the exported ./dist/* subpath (require can't resolve "." — the
+// package only exposes an `import` condition, not `require`).
+const rockboxDist = dirname(require.resolve("rockbox-wasm/dist/rockbox.js"));
+cpSync(
+  rockboxDist,
+  fileURLToPath(new URL("./public/rockbox", import.meta.url)),
+  { recursive: true },
+);
+
 export default defineConfig({
   plugins: [
     tailwindcss(),
@@ -59,4 +82,10 @@ export default defineConfig({
       },
     }),
   ],
+  optimizeDeps: {
+    // Don't prebundle rockbox-wasm: it resolves its worker/worklet via
+    // `new URL("./file", import.meta.url)`, which esbuild's prebundle would
+    // rewrite incorrectly. Served as-is, the ESM facade loads them at runtime.
+    exclude: ["rockbox-wasm"],
+  },
 });
diff --git a/apps/web/.gitignore b/apps/web/.gitignore
index 2ec3b782..748df5e6 100644
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@@ -33,4 +33,6 @@ dist-ssr
 .env.prod
 .env.local
 
-.tanstack
\ No newline at end of file
+.tanstack
+# rockbox-wasm runtime assets (copied from node_modules by vite.config.ts)
+public/rockbox
diff --git a/apps/web/package.json b/apps/web/package.json
index 94745f8b..89027f2f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -57,7 +57,6 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "effect": "^3.14.22",
-    "hls.js": "^1.6.16",
     "html-to-image": "^1.11.13",
     "i18next": "^24.2.2",
     "jotai": "^2.11.3",
@@ -74,6 +73,7 @@
     "react-i18next": "^15.4.0",
     "react-lazy-load-image-component": "^1.6.3",
     "recharts": "^2.15.1",
+    "rockbox-wasm": "^0.1.3",
     "styletron-engine-monolithic": "^1.0.0",
     "styletron-react": "^6.1.1",
     "swr": "^2.3.0",
diff --git a/apps/web/src/atoms/equalizer.ts b/apps/web/src/atoms/equalizer.ts
index fa578db7..410a829a 100644
--- a/apps/web/src/atoms/equalizer.ts
+++ b/apps/web/src/atoms/equalizer.ts
@@ -5,19 +5,18 @@ export interface EqBandSetting {
   gain: number; // dB, clamped to [-24, +24]
 }
 
+// The 10 EQ band centre frequencies (32 Hz … 16 kHz). Shared canonical set —
+// index-aligned across the EQ UI, the settings lexicon and the wasm engine.
+// Matches atradio.fm so records sync cleanly.
+export const EQ_BANDS_HZ = [
+  32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000,
+] as const;
+
 // 10-band EQ: band 0 = low-shelf, bands 1-8 = peaking, band 9 = high-shelf
-export const EQ_BANDS: EqBandSetting[] = [
-  { cutoff: 60,    gain: 0 },
-  { cutoff: 200,   gain: 0 },
-  { cutoff: 500,   gain: 0 },
-  { cutoff: 1000,  gain: 0 },
-  { cutoff: 2000,  gain: 0 },
-  { cutoff: 4000,  gain: 0 },
-  { cutoff: 7000,  gain: 0 },
-  { cutoff: 10000, gain: 0 },
-  { cutoff: 14000, gain: 0 },
-  { cutoff: 20000, gain: 0 },
-];
+export const EQ_BANDS: EqBandSetting[] = EQ_BANDS_HZ.map((cutoff) => ({
+  cutoff,
+  gain: 0,
+}));
 
 // Q=7.0 matches the Rockbox firmware default (stored as tenths: 70 → 7.0).
 export const EQ_Q = 7.0;
diff --git a/apps/web/src/components/EqualizerModal/EqualizerModal.tsx b/apps/web/src/components/EqualizerModal/EqualizerModal.tsx
index 34e2d343..7ddcd199 100644
--- a/apps/web/src/components/EqualizerModal/EqualizerModal.tsx
+++ b/apps/web/src/components/EqualizerModal/EqualizerModal.tsx
@@ -1,9 +1,24 @@
 import styled from "@emotion/styled";
 import { IconX } from "@tabler/icons-react";
 import { useCallback, useMemo } from "react";
-import { EQ_BANDS, EQ_Q, type EqBandSetting } from "../../atoms/equalizer";
+import { EQ_BANDS, EQ_BANDS_HZ, EQ_Q, type EqBandSetting } from "../../atoms/equalizer";
 import { useAudioSettings } from "../../hooks/useAudioSettings";
 
+// Vertical EQ band fader — native range input styled to match the app's other
+// audio sliders (Tone / Crossfade / ReplayGain). baseweb's Slider is
+// horizontal-only, so it can't render a vertical 10-band fader.
+const VerticalSlider = styled.input<{ disabled: boolean }>`
+  appearance: slider-vertical;
+  -webkit-appearance: slider-vertical;
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 22px;
+  height: 148px;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  accent-color: var(--color-primary);
+  opacity: ${({ disabled }) => disabled ? 0.35 : 1};
+`;
+
 const Overlay = styled.div`
   position: fixed;
   inset: 0;
@@ -194,18 +209,6 @@ const SliderWrap = styled.div`
   justify-content: center;
 `;
 
-const VerticalSlider = styled.input<{ disabled: boolean }>`
-  appearance: slider-vertical;
-  -webkit-appearance: slider-vertical;
-  writing-mode: vertical-lr;
-  direction: rtl;
-  width: 22px;
-  height: 148px;
-  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
-  accent-color: var(--color-primary);
-  opacity: ${({ disabled }) => disabled ? 0.35 : 1};
-`;
-
 const FreqLabel = styled.span`
   font-size: 0.62rem;
   font-family: RockfordSansMedium;
@@ -215,7 +218,7 @@ const FreqLabel = styled.span`
 `;
 
 function formatFreq(hz: number) {
-  return hz >= 1000 ? `${hz / 1000}kHz` : `${hz}Hz`;
+  return hz >= 1000 ? `${hz / 1000}kHz` : `${hz}`;
 }
 
 type Props = { onClose: () => void };
@@ -230,8 +233,9 @@ function EqualizerModal({ onClose }: Props) {
   // (a value like -135 in the wire format means -13.5 dB).
   const bands: EqBandSetting[] = useMemo(
     () =>
-      (data?.eqBandSettings ?? EQ_BANDS).map((b) => ({
-        cutoff: b.cutoff,
+      (data?.eqBandSettings ?? EQ_BANDS).map((b, i) => ({
+        // Frequency is fixed by band index — ignore any stale persisted cutoff.
+        cutoff: EQ_BANDS_HZ[i] ?? b.cutoff,
         gain: b.gain / 10,
       })),
     [data?.eqBandSettings],
@@ -307,6 +311,7 @@ function EqualizerModal({ onClose }: Props) {
                   <SliderWrap>
                     <VerticalSlider
                       type="range"
+                      aria-label={`${formatFreq(band.cutoff)} gain`}
                       min={-24}
                       max={24}
                       step={0.5}
diff --git a/apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx b/apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx
index e545d0c2..150ce1dc 100644
--- a/apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx
+++ b/apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx
@@ -10,27 +10,16 @@ import { queueAtom, queueIndexAtom, queuePanelOpenAtom } from "../../atoms/queue
 import { fullscreenPlayerAtom } from "../../atoms/fullscreenPlayer";
 import { profileAtom } from "../../atoms/profile";
 import { shuffleAtom, repeatModeAtom, type RepeatMode } from "../../atoms/playback";
-import { API_URL, ROCKBOX_URL } from "../../consts";
+import { API_URL } from "../../consts";
 import useLike from "../../hooks/useLike";
 import useSpotify from "../../hooks/useSpotify";
 import StickyPlayer from "./StrickyPlayer";
 import FullscreenPlayer from "../FullscreenPlayer/FullscreenPlayer";
 import { QueuePanel } from "../QueuePanel/QueuePanel";
-import { consola } from "consola";
 import { useQueryClient } from "@tanstack/react-query";
 import { feedGeneratorUriAtom } from "../../atoms/feed";
-import { hlsAudio, useHlsAudio } from "../../lib/hls-audio";
-import {
-  getCurrentTrack,
-  getPlaybackStatus,
-  getCurrentPlaylist,
-  resumePlayback,
-  pausePlayback,
-  nextTrack,
-  previousTrack,
-  playlistRemoveTrack,
-  seekTo,
-} from "../../lib/rockbox-graphql";
+import { getRockboxPlayer } from "../../lib/audio/rockbox-engine";
+import { useRockboxEngine } from "../../hooks/useRockboxEngine";
 import { useUploadScrobble } from "../../hooks/useUploadScrobble";
 
 // ---------------------------------------------------------------------------
@@ -91,11 +80,13 @@ const PlayerDot = styled.span<{ active: boolean }>`
 
 function StickyPlayerWithData() {
   useUploadScrobble();
+  // Bridge the in-browser rockbox-wasm engine → jotai atoms (track/progress/
+  // status/queue events). Replaces the old GraphQL polling entirely.
+  useRockboxEngine();
   const queryClient = useQueryClient();
   const feedUri = useAtomValue(feedGeneratorUriAtom);
   const [liked, setLiked] = useState<Record<string, boolean>>({});
   const [nowPlaying, setNowPlaying] = useAtom(nowPlayingAtom);
-  const progressInterval = useRef<number | null>(null);
   const lastFetchedRef = useRef(0);
   const nowPlayingInterval = useRef<number | null>(null);
   const { play, pause, next, previous, seek } = useSpotify();
@@ -105,9 +96,8 @@ function StickyPlayerWithData() {
   const playerRef = useRef(player);
   const likedRef = useRef(liked);
   const profile = useAtomValue(profileAtom);
-  const did = profile?.did ?? "";
 
-  // Rockbox queue (mirrors what rockbox has server-side)
+  // The in-browser rockbox queue (mirrored from the wasm engine's events).
   const [queue, setQueue] = useAtom(queueAtom);
   const [queueIndex, setQueueIndex] = useAtom(queueIndexAtom);
   const [queuePanelOpen, setQueuePanelOpen] = useAtom(queuePanelOpenAtom);
@@ -115,166 +105,52 @@ function StickyPlayerWithData() {
   const [shuffle, setShuffle] = useAtom(shuffleAtom);
   const [repeatMode, setRepeatMode] = useAtom(repeatModeAtom);
 
+  // Local volume/mute mirror of the engine's output gain.
+  const [volume, setVolumeState] = useState(1);
+  const [muted, setMutedState] = useState(false);
+
   // Player selector
   const [playerSelectorOpen, setPlayerSelectorOpen] = useState(false);
   const speakerRef = useRef<HTMLButtonElement>(null);
-  const hlsState = useHlsAudio();
-
-  const queueRef = useRef(queue);
-  const queueIndexRef = useRef(queueIndex);
-  // Suppress pollRockbox's "status === 0 → clear player" path for ~2 s after
-  // a user-initiated jump. Rockbox flips status to 0 mid-track-switch; if we
-  // catch that, we'd null the player and stop the queue panel from rendering.
-  const transitionUntilRef = useRef(0);
-  // Pending index from a user click. While set, pollQueue won't accept a
-  // playlist.index that disagrees with it — rockbox can briefly report the
-  // OLD index after a backward jump (the playlist-pointer update and the
-  // codec restart aren't perfectly atomic), which would otherwise revert
-  // our optimistic queueIndex and snap Up Next back to the pre-click window.
-  const pendingIndexRef = useRef<{ idx: number; until: number } | null>(null);
-
-  useEffect(() => { queueRef.current = queue; }, [queue]);
-  useEffect(() => { queueIndexRef.current = queueIndex; }, [queueIndex]);
-
-  // ── Rockbox GraphQL polling ───────────────────────────────────────────────
-
-  const pollRockbox = useCallback(async () => {
-    if (!did || playerRef.current === "spotify") return;
-    try {
-      const [track, status] = await Promise.all([
-        getCurrentTrack(did),
-        getPlaybackStatus(did),
-      ]);
-
-      const isPlaying = status === 1;
-
-      // Only clear when rockbox explicitly reports stopped (status 0).
-      // currentTrack can be null for URL-based playback even while playing.
-      // Also suppress during a user-initiated jump — rockbox flips status to
-      // 0 momentarily while switching tracks, and clearing player would tear
-      // down the queue panel + cause pollQueue to stop syncing.
-      if (status === 0 && playerRef.current === "rockbox" && Date.now() >= transitionUntilRef.current) {
-        setNowPlaying(null);
-        setPlayer(null);
-        return;
-      }
-
-      if (track?.title) {
-        // Full metadata update — resync progress from server to prevent drift.
-        setNowPlaying((prev) => ({
-          title: track.title,
-          artist: track.artist ?? "",
-          artistUri: "",
-          songUri: "",
-          albumUri: "",
-          duration: track.length,
-          // Only snap to server elapsed when it has actually advanced; keep
-          // local value otherwise to avoid the progress bar jumping backwards.
-          progress: track.elapsed > 0 ? track.elapsed : (prev?.progress ?? 0),
-          albumArt: track.albumArt
-            ? track.albumArt.startsWith("http")
-              ? track.albumArt
-              : `${ROCKBOX_URL}/${did}/covers/${track.albumArt}`
-            : prev?.albumArt,
-          isPlaying,
-          sha256: "",
-          liked: likedRef.current[track.id] ?? false,
-        }));
-        if (playerRef.current === null) setPlayer("rockbox");
-      } else {
-        // currentTrack null but rockbox may still be playing (URL-based tracks
-        // don't always populate metadata). Just sync isPlaying.
-        setNowPlaying((prev) => prev ? { ...prev, isPlaying } : prev);
-        if (playerRef.current === null && isPlaying) setPlayer("rockbox");
-      }
-    } catch {
-      // rockbox server unreachable — don't clear nowPlaying
-    }
-  }, [did, setNowPlaying, setPlayer]);
-
-  // Poll rockbox queue to keep QueuePanel in sync.
-  //
-  // `force=true` skips the player-state gate. We use it for refetches
-  // triggered by an explicit user action (clicking a queue row, removing a
-  // track) — during the brief moment rockbox transitions tracks its status
-  // flips to 0, pollRockbox clears `player` to null, and a non-forced
-  // pollQueue would bail, leaving the queue mirror stale and Up Next
-  // showing the wrong window of tracks.
-  const pollQueue = useCallback(
-    async (force = false) => {
-      if (!did) return;
-      if (!force && playerRef.current !== "rockbox") return;
-      try {
-        const playlist = await getCurrentPlaylist(did);
-        if (!playlist) return;
-
-        // Pending-index protection. If the user just jumped to `pending.idx`
-        // and rockbox echoes back a DIFFERENT index, that's almost always
-        // a stale read (rockbox hasn't fully committed the seek yet). Keep
-        // the user's intent and try again on the next tick. If rockbox
-        // confirms (or the window elapses), clear pending and accept its
-        // value as authoritative again.
-        const pending = pendingIndexRef.current;
-        const now = Date.now();
-        let effectiveIndex = playlist.index;
-        if (pending) {
-          if (now > pending.until) {
-            pendingIndexRef.current = null;
-          } else if (playlist.index !== pending.idx) {
-            effectiveIndex = pending.idx;
-          } else {
-            // rockbox caught up — release the pending hold
-            pendingIndexRef.current = null;
-          }
-        }
-
-        setQueueIndex(effectiveIndex);
-        setQueue(
-          playlist.tracks.map((t) => ({
-            uploadId: t.id,
-            title: t.title,
-            artist: t.artist,
-            albumArtist: t.artist,
-            album: t.album,
-            albumArt: t.albumArt
-              ? t.albumArt.startsWith("http")
-                ? t.albumArt
-                : `${ROCKBOX_URL}/${did}/covers/${t.albumArt}`
-              : null,
-            duration: t.length,
-            sha256: "",
-            songUri: t.path,
-          })),
-        );
-      } catch {
-        // ignore
-      }
-    },
-    [did, setQueue, setQueueIndex],
-  );
 
   useEffect(() => {
-    if (!did) return;
-    pollRockbox();
-    const interval = window.setInterval(pollRockbox, 2000);
-    return () => clearInterval(interval);
-  }, [did, pollRockbox]);
+    nowPlayingRef.current = nowPlaying;
+    playerRef.current = player;
+    likedRef.current = liked;
+  }, [nowPlaying, player, liked]);
 
+  // Push shuffle/repeat changes to the engine when rockbox is active.
   useEffect(() => {
-    if (!did) return;
-    const interval = window.setInterval(pollQueue, 5000);
-    return () => clearInterval(interval);
-  }, [did, pollQueue]);
+    if (player !== "rockbox") return;
+    const p = getRockboxPlayer();
+    if (!p.ready) return;
+    p.setShuffle(shuffle);
+  }, [shuffle, player]);
 
-  // Attach HLS stream when player is rockbox
   useEffect(() => {
-    if (player !== "rockbox" || !did) {
-      hlsAudio.detach();
-      return;
-    }
-    const url = `${ROCKBOX_URL}/${did}/hls/audio.m3u8`;
-    hlsAudio.attach(url);
-  }, [player, did]);
+    if (player !== "rockbox") return;
+    const p = getRockboxPlayer();
+    if (!p.ready) return;
+    p.setRepeat(repeatMode === "one" ? 1 : repeatMode === "all" ? 2 : 0);
+  }, [repeatMode, player]);
+
+  // Progress ticker for Spotify only — rockbox progress comes from the engine's
+  // `progress` events, so skip it here to avoid double-counting.
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setNowPlaying((prev) => {
+        if (!prev || !prev.isPlaying) return prev;
+        if (playerRef.current !== "spotify") return prev;
+        if (prev.progress >= prev.duration) {
+          setTimeout(fetchCurrentlyPlaying, 2000);
+          return prev;
+        }
+        return { ...prev, progress: prev.progress + 100 };
+      });
+    }, 100);
+    return () => clearInterval(id);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // ── Spotify polling ───────────────────────────────────────────────────────
 
@@ -307,34 +183,6 @@ function StickyPlayerWithData() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setNowPlaying]);
 
-  const startProgressTracking = useCallback(() => {
-    if (progressInterval.current) clearInterval(progressInterval.current);
-    progressInterval.current = window.setInterval(() => {
-      setNowPlaying((prev) => {
-        if (!prev || !prev.duration) return prev;
-        if (prev.progress >= prev.duration) {
-          if (playerRef.current === "spotify") setTimeout(fetchCurrentlyPlaying, 2000);
-          return prev;
-        }
-        if (prev.isPlaying) return { ...prev, progress: prev.progress + 100 };
-        return prev;
-      });
-    }, 100);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchCurrentlyPlaying, setNowPlaying]);
-
-  useEffect(() => {
-    startProgressTracking();
-    return () => { if (progressInterval.current) clearInterval(progressInterval.current); };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    nowPlayingRef.current = nowPlaying;
-    playerRef.current = player;
-    likedRef.current = liked;
-  }, [nowPlaying, player, liked]);
-
   useEffect(() => {
     if (player === "rockbox") return;
     if (nowPlayingInterval.current) clearInterval(nowPlayingInterval.current);
@@ -348,12 +196,10 @@ function StickyPlayerWithData() {
 
   const onPlay = async () => {
     if (player === "rockbox") {
-      if (!hlsState.attached && did) {
-        hlsAudio.attach(`${ROCKBOX_URL}/${did}/hls/audio.m3u8`);
-      }
-      hlsAudio.resume();
+      const p = getRockboxPlayer();
+      if (!p.ready) await p.init();
+      p.play();
       setNowPlaying((prev) => prev ? { ...prev, isPlaying: true } : prev);
-      await resumePlayback(did).catch(console.warn);
       return;
     }
     play();
@@ -361,9 +207,8 @@ function StickyPlayerWithData() {
 
   const onPause = () => {
     if (player === "rockbox") {
-      hlsAudio.pause();
+      getRockboxPlayer().pause();
       setNowPlaying((prev) => prev ? { ...prev, isPlaying: false } : prev);
-      pausePlayback(did).catch(console.warn);
       return;
     }
     pause();
@@ -371,7 +216,7 @@ function StickyPlayerWithData() {
 
   const onNext = () => {
     if (player === "rockbox") {
-      nextTrack(did).catch(console.warn);
+      getRockboxPlayer().next();
       return;
     }
     next();
@@ -379,7 +224,7 @@ function StickyPlayerWithData() {
 
   const onPrevious = () => {
     if (player === "rockbox") {
-      previousTrack(did).catch(console.warn);
+      getRockboxPlayer().prev();
       return;
     }
     previous();
@@ -387,13 +232,29 @@ function StickyPlayerWithData() {
 
   const onSeek = (position: number) => {
     if (player === "rockbox") {
-      seekTo(did, position).catch(console.warn);
+      getRockboxPlayer().seek(position);
       setNowPlaying((prev) => prev ? { ...prev, progress: position } : prev);
       return;
     }
     seek(position);
   };
 
+  // ── Volume ────────────────────────────────────────────────────────────────
+
+  const onVolumeChange = (v: number) => {
+    setVolumeState(v);
+    if (v > 0 && muted) setMutedState(false);
+    const p = getRockboxPlayer();
+    if (p.ready) p.setVolume(muted ? 0 : v);
+  };
+
+  const onToggleMute = () => {
+    const nextMuted = !muted;
+    setMutedState(nextMuted);
+    const p = getRockboxPlayer();
+    if (p.ready) p.setVolume(nextMuted ? 0 : volume);
+  };
+
   // ── Like / dislike ────────────────────────────────────────────────────────
 
   const onLike = async (uri: string) => {
@@ -440,24 +301,9 @@ function StickyPlayerWithData() {
             onClose={() => setQueuePanelOpen(false)}
             onPlayIndex={(idx) => {
               const track = queue[idx];
-              if (!track || !did) return;
-              // Suppress pollRockbox's status=0 → clear-player path for the
-              // next 2 seconds. Rockbox stops the codec mid-jump and the
-              // transient status=0 would otherwise nuke `player`, hiding
-              // the queue panel and stopping pollQueue.
-              transitionUntilRef.current = Date.now() + 2000;
-              // Pin our intent for 3 s. pollQueue will keep displaying `idx`
-              // even if rockbox briefly echoes the OLD index — common for
-              // backward jumps where the playlist-pointer update and the
-              // codec restart race. Released early once rockbox confirms.
-              pendingIndexRef.current = { idx, until: Date.now() + 3000 };
-              // Optimistic UI: jump the index NOW so up-next/history flip
-              // immediately. Then call rockbox, then refetch — twice. The
-              // first refetch handles the common case (rockbox sets
-              // playlist->index synchronously). The 500 ms second refetch is
-              // belt-and-suspenders for backward jumps where rockbox needs
-              // to spin up a fresh HTTP fetch for the older track before
-              // get_current_track returns the right metadata.
+              if (!track) return;
+              // Optimistic UI: flip the index + now-playing immediately; the
+              // engine's track/status events reconcile within a tick.
               setQueueIndex(idx);
               setNowPlaying({
                 title: track.title,
@@ -472,30 +318,14 @@ function StickyPlayerWithData() {
                 sha256: track.sha256,
                 liked: false,
               });
-              import("../../lib/rockbox-graphql").then(({ startPlaylist }) =>
-                startPlaylist(did, idx)
-                  .then(() => pollQueue(true))
-                  .then(() =>
-                    new Promise((r) => setTimeout(r, 500)).then(() => pollQueue(true)),
-                  )
-                  .catch((e) => consola.warn("startPlaylist failed", e)),
-              );
+              getRockboxPlayer().skipTo(idx);
             }}
             onRemove={(idx) => {
-              if (!did) return;
-              // Call rockbox to actually drop the track; force the refetch
-              // because removing the currently-playing track can flip the
-              // player status to 0 briefly.
-              playlistRemoveTrack(did, idx)
-                .then(() => pollQueue(true))
-                .catch((e) => consola.warn("playlistRemoveTrack failed", e));
+              getRockboxPlayer().removeAt(idx);
             }}
             onReorder={(newQueue) => {
-              // Reorder is a UI-only optimistic update for now — rockbox has
-              // no "move track" mutation, only insert/remove. A proper
-              // implementation would remove + re-insert at the new position;
-              // until then, the next pollQueue tick will snap back to
-              // rockbox's order.
+              // Optimistic UI only — the wasm engine has no atomic "move", so
+              // the next `queue` event will snap back to the engine's order.
               setQueue(newQueue);
             }}
           />
@@ -518,10 +348,10 @@ function StickyPlayerWithData() {
           onPlaylist={() => setQueuePanelOpen((o) => !o)}
           onClose={() => setFullscreenOpen(false)}
           isUploadPlayer={isRockbox}
-          volume={hlsState.volume}
-          muted={hlsState.muted}
-          onVolumeChange={(v) => hlsAudio.setVolume(v)}
-          onToggleMute={() => hlsAudio.toggleMute()}
+          volume={volume}
+          muted={muted}
+          onVolumeChange={onVolumeChange}
+          onToggleMute={onToggleMute}
           shuffle={shuffle}
           repeatMode={repeatMode}
           onShuffle={() => setShuffle((s) => !s)}
@@ -546,20 +376,16 @@ function StickyPlayerWithData() {
                   Spotify
                 </PlayerSelectorItem>
               )}
-              {did && (
-                <PlayerSelectorItem
-                  active={isRockbox}
-                  onClick={() => {
-                    const url = `${ROCKBOX_URL}/${did}/hls/audio.m3u8`;
-                    hlsAudio.attach(url);
-                    setPlayer("rockbox");
-                    setPlayerSelectorOpen(false);
-                  }}
-                >
-                  <PlayerDot active={isRockbox} />
-                  Rockbox
-                </PlayerSelectorItem>
-              )}
+              <PlayerSelectorItem
+                active={isRockbox}
+                onClick={() => {
+                  setPlayer("rockbox");
+                  setPlayerSelectorOpen(false);
+                }}
+              >
+                <PlayerDot active={isRockbox} />
+                Rockbox
+              </PlayerSelectorItem>
             </PlayerSelectorPopup>
           </>,
           document.body,
@@ -588,10 +414,10 @@ function StickyPlayerWithData() {
         repeatMode={repeatMode}
         onShuffle={() => setShuffle((s) => !s)}
         onRepeat={() => setRepeatMode((r: RepeatMode) => r === "off" ? "all" : r === "all" ? "one" : "off")}
-        volume={hlsState.volume}
-        muted={hlsState.muted}
-        onVolumeChange={(v) => hlsAudio.setVolume(v)}
-        onToggleMute={() => hlsAudio.toggleMute()}
+        volume={volume}
+        muted={muted}
+        onVolumeChange={onVolumeChange}
+        onToggleMute={onToggleMute}
       />
     </>
   );
diff --git a/apps/web/src/hooks/useAudioSettings.tsx b/apps/web/src/hooks/useAudioSettings.tsx
index d6e6decf..91c0bd96 100644
--- a/apps/web/src/hooks/useAudioSettings.tsx
+++ b/apps/web/src/hooks/useAudioSettings.tsx
@@ -1,5 +1,6 @@
-import { type QueryClient, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtom, useAtomValue } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 import { useEffect } from "react";
 import { profileAtom } from "../atoms/profile";
 import type {
@@ -15,44 +16,40 @@ import type {
   LexTone,
   ReplayGainMode,
 } from "../api/audio-settings";
+import { getAudioSettings, putAudioSettings } from "../api/audio-settings";
 import {
-  getAudioSettings,
-  putAudioSettings,
-} from "../api/audio-settings";
-import {
+  DEFAULT_GLOBAL_SETTINGS,
   type EqBand,
   type GlobalSettings,
-  type SettingsPatch,
-  getGlobalSettings,
-  saveSettings,
-} from "../lib/rockbox-graphql";
+  publishAudioSettings,
+} from "../lib/audio/rockbox-engine";
 
-// useAudioSettings — single source of truth for audio settings across the UI.
+// useAudioSettings — single source of truth for audio (DSP) settings.
 //
-//   ┌─ rockbox (per-DID, ephemeral) ───────────┐
-//   │  Live values; what the codec uses now    │
+//   ┌─ in-browser wasm engine (live) ──────────┐
+//   │  What the rockbox-wasm DSP chain uses now │
 //   └──────────────────────────────────────────┘
-//             ▲              │
-//   push on   │              │ initial fetch (firmware defaults
-//   change ──┐│              │ for a fresh container)
-//            ││              ▼
-//   ┌────────┴──── useAudioSettings ───────────┐
-//   │  - lexicon = cross-device authoritative  │
-//   │  - rockbox = live in-container state     │
-//   │  - on mount: lexicon → rockbox (once,    │
-//   │    so a freshly-booted container picks   │
-//   │    up the user's saved settings)         │
-//   │  - on change: write to BOTH              │
-//   └──────────────────────────────────────────┘
-//             ▲              │
-//   push on   │              │
-//   change    │              ▼
-//   ┌─────────┴── audio.settings lexicon ──────┐
-//   │  Persisted to atproto, survives container│
-//   │  restarts + works across devices         │
+//             ▲ publishAudioSettings on change
+//             │
+//   ┌─────────┴── useAudioSettings ────────────┐
+//   │  - `settingsAtom` (localStorage) holds    │
+//   │    the authoritative snapshot on-device   │
+//   │  - on change: update atom → engine + PDS  │
+//   │  - on mount: hydrate atom from the PDS     │
+//   │    lexicon once (cross-device settings)    │
 //   └──────────────────────────────────────────┘
+//             ▲ debounced putAudioSettings
+//             ▼
+//   ┌─── app.rocksky.rockbox.{get,put}AudioSettings ──┐
+//   │  Persisted to atproto — survives reloads, syncs │
+//   │  across devices.                                │
+//   └─────────────────────────────────────────────────┘
+//
+// The former remote rockbox server (GraphQL saveSettings) is gone: settings now
+// live in localStorage + the atproto lexicon, and are pushed to the local wasm
+// engine. There is no network call in the audible path.
 
-// ── Unit + enum conversion helpers (lexicon ↔ rockbox-graphql) ───────────────
+// ── Enum conversions (lexicon ↔ GlobalSettings ints) ─────────────────────────
 
 const REPEAT_MODE_NAMES = ["off", "all", "one", "shuffle", "ab"] as const;
 export type RepeatMode = (typeof REPEAT_MODE_NAMES)[number];
@@ -99,9 +96,19 @@ function bandRockboxToLex(b: EqBand): LexEqBand {
   return { frequency: b.cutoff, gain: b.gain, q: b.q };
 }
 
-// Merge a lexicon record into the live rockbox state representation. Anything
-// the lexicon doesn't specify falls through to whatever rockbox already has.
-function applyLexiconToRockbox(
+// ── On-device authoritative settings snapshot ────────────────────────────────
+//
+// Persisted to localStorage so the DSP chain survives reloads without a network
+// round-trip. Seeded from firmware defaults; hydrated from the lexicon on mount.
+
+const settingsAtom = atomWithStorage<GlobalSettings>(
+  "rocksky:audio.settings",
+  DEFAULT_GLOBAL_SETTINGS,
+);
+
+/** Merge a lexicon record into a GlobalSettings snapshot. Anything the lexicon
+ *  doesn't specify keeps its current value. */
+function applyLexiconToSettings(
   base: GlobalSettings,
   lex: AudioSettingsView | null,
 ): GlobalSettings {
@@ -140,151 +147,29 @@ function applyLexiconToRockbox(
   return out;
 }
 
-// ── Per-section patch builders ───────────────────────────────────────────────
-//
-// Each `set*` action merges into a per-section pending patch. Rockbox is the
-// audible path → throttle (leading + trailing) so the codec tracks the slider
-// in near-realtime without hammering the per-IP rate limiter inside the Fly
-// container. Lexicon persistence only needs the final value → debounce
-// trailing-only.
+// ── Debounced lexicon persistence (per section) ──────────────────────────────
 
-const ROCKBOX_THROTTLE_MS = 120;
 const LEXICON_DEBOUNCE_MS = 800;
-
-const QK_ROCKBOX = ["audio-settings", "rockbox"] as const;
-const QK_LEXICON = ["audio-settings", "lexicon"] as const;
-
 type SectionKey = "equalizer" | "tone" | "crossfade" | "replayGain";
 
-interface SectionState {
-  rockbox: SettingsPatch;
-  // Per-section lexicon payload (LexEqualizer for equalizer, etc.) — wrapped
-  // into AudioSettingsPatch.{section} at flush time.
-  lexicon: LexEqualizer | LexTone | LexCrossfade | LexReplayGain;
-  rockboxTimer: ReturnType<typeof setTimeout> | null;
-  lexiconTimer: ReturnType<typeof setTimeout> | null;
-  rockboxLastRun: number; // performance.now() at last flush
-}
-
-interface DidState {
-  equalizer: SectionState;
-  tone: SectionState;
-  crossfade: SectionState;
-  replayGain: SectionState;
-  qc: QueryClient;
-}
-
-const stateByDid = new Map<string, DidState>();
-
-function newSection(): SectionState {
-  return {
-    rockbox: {},
-    lexicon: {},
-    rockboxTimer: null,
-    lexiconTimer: null,
-    rockboxLastRun: 0,
-  };
-}
-
-function getDidState(did: string, qc: QueryClient): DidState {
-  let s = stateByDid.get(did);
-  if (!s) {
-    s = {
-      equalizer: newSection(),
-      tone: newSection(),
-      crossfade: newSection(),
-      replayGain: newSection(),
-      qc,
-    };
-    stateByDid.set(did, s);
-  } else {
-    // Keep the freshest QueryClient — survives hook remounts.
-    s.qc = qc;
-  }
-  return s;
-}
-
-// Mirror the rockbox-side patch into the React Query cache so reads pick up
-// the slider's new position immediately, before the network round-trip lands.
-function applyRockboxPatchToCache(
-  qc: QueryClient,
-  did: string,
-  patch: SettingsPatch,
-): void {
-  qc.setQueryData<GlobalSettings>([...QK_ROCKBOX, did], (prev) => {
-    if (!prev) return prev;
-    const next: GlobalSettings = { ...prev };
-    if (patch.eqEnabled !== undefined) next.eqEnabled = patch.eqEnabled;
-    if (patch.eqBandSettings) next.eqBandSettings = patch.eqBandSettings;
-    if (patch.bass !== undefined) next.bass = patch.bass;
-    if (patch.treble !== undefined) next.treble = patch.treble;
-    if (patch.balance !== undefined) next.balance = patch.balance;
-    if (patch.channelConfig !== undefined) next.channelConfig = patch.channelConfig;
-    if (patch.crossfade !== undefined) next.crossfade = patch.crossfade;
-    if (patch.fadeInDelay !== undefined) next.crossfadeFadeInDelay = patch.fadeInDelay;
-    if (patch.fadeInDuration !== undefined)
-      next.crossfadeFadeInDuration = patch.fadeInDuration;
-    if (patch.fadeOutDelay !== undefined) next.crossfadeFadeOutDelay = patch.fadeOutDelay;
-    if (patch.fadeOutDuration !== undefined)
-      next.crossfadeFadeOutDuration = patch.fadeOutDuration;
-    if (patch.fadeOutMixmode !== undefined)
-      next.crossfadeFadeOutMixmode = patch.fadeOutMixmode;
-    if (patch.replaygainSettings) next.replaygainSettings = patch.replaygainSettings;
-    return next;
-  });
-}
-
-async function flushRockbox(did: string, section: SectionKey): Promise<void> {
-  const s = stateByDid.get(did);
-  if (!s) return;
-  const sec = s[section];
-  if (Object.keys(sec.rockbox).length === 0) return;
-  const patch = sec.rockbox;
-  sec.rockbox = {};
-  sec.rockboxLastRun = performance.now();
-  try {
-    await saveSettings(did, patch);
-  } catch (err) {
-    console.warn(`[useAudioSettings] rockbox ${section} save failed`, err);
-    // Refetch so the UI converges back on what the codec actually has.
-    // Swallow invalidation errors — the next staleTime tick will refetch anyway.
-    s.qc.invalidateQueries({ queryKey: [...QK_ROCKBOX, did] }).catch(() => undefined);
+const pendingLexicon: Record<
+  SectionKey,
+  {
+    patch: LexEqualizer | LexTone | LexCrossfade | LexReplayGain;
+    timer: ReturnType<typeof setTimeout> | null;
   }
-}
-
-function scheduleRockboxFlush(did: string, section: SectionKey): void {
-  const s = stateByDid.get(did);
-  if (!s) return;
-  const sec = s[section];
-  const now = performance.now();
-  const elapsed = now - sec.rockboxLastRun;
-
-  // Leading edge: fire immediately if we're outside the throttle window. Keeps
-  // the first slider move feeling instant.
-  if (sec.rockboxLastRun === 0 || elapsed >= ROCKBOX_THROTTLE_MS) {
-    if (sec.rockboxTimer) {
-      clearTimeout(sec.rockboxTimer);
-      sec.rockboxTimer = null;
-    }
-    void flushRockbox(did, section);
-    return;
-  }
-
-  // Trailing edge: coalesce subsequent ticks into one flush at window end.
-  if (sec.rockboxTimer) return;
-  sec.rockboxTimer = setTimeout(() => {
-    sec.rockboxTimer = null;
-    void flushRockbox(did, section);
-  }, ROCKBOX_THROTTLE_MS - elapsed);
-}
+> = {
+  equalizer: { patch: {}, timer: null },
+  tone: { patch: {}, timer: null },
+  crossfade: { patch: {}, timer: null },
+  replayGain: { patch: {}, timer: null },
+};
 
-async function flushLexicon(did: string, section: SectionKey): Promise<void> {
-  const s = stateByDid.get(did);
-  if (!s) return;
-  const sec = s[section];
-  if (Object.keys(sec.lexicon).length === 0) return;
-  const patch = sec.lexicon;
-  sec.lexicon = {};
+async function flushLexicon(section: SectionKey): Promise<void> {
+  const sec = pendingLexicon[section];
+  if (Object.keys(sec.patch).length === 0) return;
+  const patch = sec.patch;
+  sec.patch = {};
   const wrapped: AudioSettingsPatch = { [section]: patch };
   try {
     await putAudioSettings(wrapped);
@@ -293,34 +178,17 @@ async function flushLexicon(did: string, section: SectionKey): Promise<void> {
   }
 }
 
-function scheduleLexiconFlush(did: string, section: SectionKey): void {
-  const s = stateByDid.get(did);
-  if (!s) return;
-  const sec = s[section];
-  if (sec.lexiconTimer) clearTimeout(sec.lexiconTimer);
-  sec.lexiconTimer = setTimeout(() => {
-    sec.lexiconTimer = null;
-    void flushLexicon(did, section);
-  }, LEXICON_DEBOUNCE_MS);
-}
-
-function enqueue(
-  did: string,
-  qc: QueryClient,
+function scheduleLexiconFlush(
   section: SectionKey,
-  rockbox: SettingsPatch,
-  lexicon: LexEqualizer | LexTone | LexCrossfade | LexReplayGain,
+  patch: LexEqualizer | LexTone | LexCrossfade | LexReplayGain,
 ): void {
-  const s = getDidState(did, qc);
-  const sec = s[section];
-  // Shallow merge — each action's patch already carries cumulative slider
-  // state (consumers read from `rockboxQ.data` which we keep current via
-  // applyRockboxPatchToCache), so the later patch supersedes the earlier one.
-  Object.assign(sec.rockbox, rockbox);
-  Object.assign(sec.lexicon, lexicon);
-  applyRockboxPatchToCache(qc, did, rockbox);
-  scheduleRockboxFlush(did, section);
-  scheduleLexiconFlush(did, section);
+  const sec = pendingLexicon[section];
+  Object.assign(sec.patch, patch);
+  if (sec.timer) clearTimeout(sec.timer);
+  sec.timer = setTimeout(() => {
+    sec.timer = null;
+    void flushLexicon(section);
+  }, LEXICON_DEBOUNCE_MS);
 }
 
 export type EqMutation = { enabled?: boolean; bands?: EqBand[]; precut?: number };
@@ -339,12 +207,7 @@ export interface AudioSettingsActions {
   setReplayGain(patch: { mode?: ReplayGainMode; preamp?: number; preventClipping?: boolean }): void;
 }
 
-// ── Hook ─────────────────────────────────────────────────────────────────────
-
-// Module-level guard so hydration runs ONCE per (did, app session) — not once
-// per useAudioSettings mount. Without this, every navigation that re-mounts
-// the hook (settings page, EQ modal) would re-push to rockbox and interrupt
-// the codec, dropping playback to silence.
+// Module-level guard so lexicon hydration runs ONCE per (did, app session).
 const hydratedDids = new Set<string>();
 
 export function useAudioSettings(): {
@@ -355,245 +218,126 @@ export function useAudioSettings(): {
 } {
   const profile = useAtomValue(profileAtom);
   const did = profile?.did ?? "";
-  const qc = useQueryClient();
+  useQueryClient();
+  const [settings, setSettings] = useAtom(settingsAtom);
 
-  const rockboxQ = useQuery({
-    queryKey: [...QK_ROCKBOX, did],
-    queryFn: () => getGlobalSettings(did),
-    enabled: !!did,
-    staleTime: 30_000,
-  });
+  // Fetch the cross-device lexicon record (for hydration).
   const lexiconQ = useQuery({
-    queryKey: [...QK_LEXICON],
+    queryKey: ["audio-settings", "lexicon"],
     queryFn: getAudioSettings,
     enabled: !!did,
     staleTime: 60_000,
   });
 
-  // Hydrate rockbox from atproto ONCE per (did, container generation).
-  //
-  // The contract is explicit and per-section:
-  //   - If the user HAS atproto settings for a section → push that section to
-  //     rockbox (single saveSettings GraphQL mutation, all sections together).
-  //   - If the user has NO atproto settings for a section → leave rockbox's
-  //     value alone (don't reset it to anything).
-  //   - If the user has NO atproto record at all → don't call rockbox at all.
-  //
-  // This way a fresh container boots with firmware defaults, then the moment
-  // the user's atproto record loads we sync whatever sections they've saved
-  // before. Sections they've never touched stay at firmware defaults.
+  // Push the current snapshot to the wasm engine whenever it changes (and on
+  // mount). Cheap + idempotent; the engine adopts it live or on next init().
+  useEffect(() => {
+    publishAudioSettings(settings);
+  }, [settings]);
+
+  // Hydrate the local snapshot from the lexicon ONCE per did.
   useEffect(() => {
-    if (!did || !rockboxQ.data) return;
-    // lexiconQ.data is `null` for users with no atproto record yet — skip
-    // hydration entirely. lexiconQ.data is `undefined` while still loading.
-    if (lexiconQ.data === undefined) return;
+    if (!did) return;
+    if (lexiconQ.data === undefined) return; // still loading
     if (hydratedDids.has(did)) return;
-    if (lexiconQ.data === null) {
-      hydratedDids.add(did);
-      return;
-    }
-    // Mark BEFORE the async work so concurrent hook mounts on the same did
-    // don't all race to push the same hydration patch.
     hydratedDids.add(did);
-
-    const lex = lexiconQ.data;
-    const cur = rockboxQ.data;
-    const patch: SettingsPatch = {};
-
-    // Each `add` helper only writes to the patch when the lexicon value is
-    // genuinely DIFFERENT from rockbox's current value. Pushing identical
-    // values still triggers rockbox to re-apply settings — for EQ bands that
-    // means recomputing IIR coefficients, which can briefly drop audio. So
-    // we only push diffs.
-    const addIfChanged = <K extends keyof SettingsPatch>(
-      key: K,
-      lexValue: SettingsPatch[K] | undefined,
-      curValue: SettingsPatch[K],
-    ) => {
-      if (lexValue === undefined) return;
-      if (JSON.stringify(lexValue) === JSON.stringify(curValue)) return;
-      patch[key] = lexValue;
-    };
-
-    // ── Equalizer ──
-    if (lex.equalizer) {
-      addIfChanged("eqEnabled", lex.equalizer.enabled, cur.eqEnabled);
-      addIfChanged(
-        "eqBandSettings",
-        lex.equalizer.bands?.map(bandLexToRockbox),
-        cur.eqBandSettings,
-      );
-      // eqPrecut isn't in the GET response so we can't diff — only push it
-      // if the lexicon has a non-zero value (zero == firmware default, no-op).
-      if (lex.equalizer.precut !== undefined && lex.equalizer.precut !== 0)
-        patch.eqPrecut = lex.equalizer.precut;
-    }
-
-    // ── Tone ──
-    if (lex.tone) {
-      addIfChanged("bass", lex.tone.bass, cur.bass);
-      addIfChanged("treble", lex.tone.treble, cur.treble);
-      addIfChanged("balance", lex.tone.balance, cur.balance);
-      if (lex.tone.channels) {
-        const next = CHANNELS_TO_INT[lex.tone.channels];
-        if (next !== cur.channelConfig) patch.channelConfig = next;
-      }
-    }
-
-    // ── Crossfade ── (lexicon ms ↔ rockbox seconds)
-    if (lex.crossfade) {
-      if (lex.crossfade.mode) {
-        const next = CROSSFADE_MODE_TO_INT[lex.crossfade.mode];
-        if (next !== cur.crossfade) patch.crossfade = next;
-      }
-      const cfMap: [keyof typeof lex.crossfade, keyof SettingsPatch, number][] = [
-        ["fadeInDelay", "fadeInDelay", cur.crossfadeFadeInDelay],
-        ["fadeInDuration", "fadeInDuration", cur.crossfadeFadeInDuration],
-        ["fadeOutDelay", "fadeOutDelay", cur.crossfadeFadeOutDelay],
-        ["fadeOutDuration", "fadeOutDuration", cur.crossfadeFadeOutDuration],
-      ];
-      for (const [lexKey, patchKey, curSec] of cfMap) {
-        const ms = lex.crossfade[lexKey];
-        if (typeof ms !== "number") continue;
-        const next = Math.round(ms / 1000);
-        if (next !== curSec) (patch as Record<string, number>)[patchKey] = next;
-      }
-      if (lex.crossfade.fadeOutMixMode) {
-        const next = FADE_MIX_TO_INT[lex.crossfade.fadeOutMixMode];
-        if (next !== cur.crossfadeFadeOutMixmode) patch.fadeOutMixmode = next;
-      }
-    }
-
-    // ── Replay Gain ── (single struct in rockbox — diff the whole thing)
-    if (lex.replayGain) {
-      const curRg = cur.replaygainSettings;
-      const next = {
-        type: lex.replayGain.mode
-          ? REPLAYGAIN_TO_INT[lex.replayGain.mode]
-          : curRg.type,
-        preamp: lex.replayGain.preamp ?? curRg.preamp,
-        noclip: lex.replayGain.preventClipping ?? curRg.noclip,
-      };
-      if (JSON.stringify(next) !== JSON.stringify(curRg))
-        patch.replaygainSettings = next;
-    }
-
-    if (Object.keys(patch).length === 0) return;
-
-    saveSettings(did, patch)
-      .then(() => {
-        const merged = applyLexiconToRockbox(cur, lex);
-        qc.setQueryData([...QK_ROCKBOX, did], merged);
-      })
-      .catch((err) => {
-        // If the push fails we want a retry on the next mount, not silent
-        // permanent skip. Forget the dedup mark.
-        hydratedDids.delete(did);
-        console.warn("[useAudioSettings] hydrate to rockbox failed", err);
-      });
-  }, [did, rockboxQ.data, lexiconQ.data, qc]);
+    if (lexiconQ.data === null) return; // no record yet — keep local defaults
+    setSettings((prev) => applyLexiconToSettings(prev, lexiconQ.data));
+  }, [did, lexiconQ.data, setSettings]);
 
   const actions: AudioSettingsActions = {
     setEqualizer(patch) {
-      if (!did) return;
-      const cur = rockboxQ.data;
-      if (!cur) return;
-      const nextBands = patch.bands ?? cur.eqBandSettings;
       const lexicon: LexEqualizer = {};
-      const rockbox: SettingsPatch = {};
-      if (patch.enabled !== undefined) {
-        rockbox.eqEnabled = patch.enabled;
-        // Always include band settings alongside enable so a fresh container
-        // gets the right preset cutoffs (matches the reference webui logic).
-        rockbox.eqBandSettings = nextBands;
-        lexicon.enabled = patch.enabled;
-        lexicon.bands = nextBands.map(bandRockboxToLex);
-      }
-      if (patch.bands !== undefined) {
-        rockbox.eqBandSettings = patch.bands;
-        lexicon.bands = patch.bands.map(bandRockboxToLex);
-      }
-      if (patch.precut !== undefined) {
-        rockbox.eqPrecut = patch.precut;
-        lexicon.precut = patch.precut;
-      }
-      enqueue(did, qc, "equalizer", rockbox, lexicon);
+      setSettings((prev) => {
+        const next = { ...prev };
+        if (patch.enabled !== undefined) {
+          next.eqEnabled = patch.enabled;
+          lexicon.enabled = patch.enabled;
+          // Include bands so a fresh device gets the right cutoffs.
+          lexicon.bands = next.eqBandSettings.map(bandRockboxToLex);
+        }
+        if (patch.bands !== undefined) {
+          next.eqBandSettings = patch.bands;
+          lexicon.bands = patch.bands.map(bandRockboxToLex);
+        }
+        return next;
+      });
+      if (patch.precut !== undefined) lexicon.precut = patch.precut;
+      scheduleLexiconFlush("equalizer", lexicon);
     },
 
     setTone(patch) {
-      if (!did) return;
-      const rockbox: SettingsPatch = {};
       const lex: LexTone = {};
-      if (patch.bass !== undefined) {
-        rockbox.bass = patch.bass;
-        lex.bass = patch.bass;
-      }
-      if (patch.treble !== undefined) {
-        rockbox.treble = patch.treble;
-        lex.treble = patch.treble;
-      }
-      if (patch.balance !== undefined) {
-        rockbox.balance = patch.balance;
-        lex.balance = patch.balance;
-      }
-      if (patch.channels !== undefined) {
-        rockbox.channelConfig = CHANNELS_TO_INT[patch.channels];
-        lex.channels = patch.channels;
-      }
-      enqueue(did, qc, "tone", rockbox, lex);
+      setSettings((prev) => {
+        const next = { ...prev };
+        if (patch.bass !== undefined) { next.bass = patch.bass; lex.bass = patch.bass; }
+        if (patch.treble !== undefined) { next.treble = patch.treble; lex.treble = patch.treble; }
+        if (patch.balance !== undefined) { next.balance = patch.balance; lex.balance = patch.balance; }
+        if (patch.channels !== undefined) {
+          next.channelConfig = CHANNELS_TO_INT[patch.channels];
+          lex.channels = patch.channels;
+        }
+        return next;
+      });
+      scheduleLexiconFlush("tone", lex);
     },
 
     setCrossfade(patch) {
-      if (!did) return;
-      const rockbox: SettingsPatch = {};
       const lex: LexCrossfade = {};
-      if (patch.mode !== undefined) {
-        rockbox.crossfade = CROSSFADE_MODE_TO_INT[patch.mode];
-        lex.mode = patch.mode;
-      }
-      if (patch.fadeInDelay !== undefined) {
-        rockbox.fadeInDelay = Math.round(patch.fadeInDelay / 1000); // ms → s for rockbox
-        lex.fadeInDelay = patch.fadeInDelay;
-      }
-      if (patch.fadeInDuration !== undefined) {
-        rockbox.fadeInDuration = Math.round(patch.fadeInDuration / 1000);
-        lex.fadeInDuration = patch.fadeInDuration;
-      }
-      if (patch.fadeOutDelay !== undefined) {
-        rockbox.fadeOutDelay = Math.round(patch.fadeOutDelay / 1000);
-        lex.fadeOutDelay = patch.fadeOutDelay;
-      }
-      if (patch.fadeOutDuration !== undefined) {
-        rockbox.fadeOutDuration = Math.round(patch.fadeOutDuration / 1000);
-        lex.fadeOutDuration = patch.fadeOutDuration;
-      }
-      if (patch.fadeOutMixMode !== undefined) {
-        rockbox.fadeOutMixmode = FADE_MIX_TO_INT[patch.fadeOutMixMode];
-        lex.fadeOutMixMode = patch.fadeOutMixMode;
-      }
-      enqueue(did, qc, "crossfade", rockbox, lex);
+      setSettings((prev) => {
+        const next = { ...prev };
+        if (patch.mode !== undefined) {
+          next.crossfade = CROSSFADE_MODE_TO_INT[patch.mode];
+          lex.mode = patch.mode;
+        }
+        // lexicon uses ms; GlobalSettings uses seconds.
+        if (patch.fadeInDelay !== undefined) {
+          next.crossfadeFadeInDelay = Math.round(patch.fadeInDelay / 1000);
+          lex.fadeInDelay = patch.fadeInDelay;
+        }
+        if (patch.fadeInDuration !== undefined) {
+          next.crossfadeFadeInDuration = Math.round(patch.fadeInDuration / 1000);
+          lex.fadeInDuration = patch.fadeInDuration;
+        }
+        if (patch.fadeOutDelay !== undefined) {
+          next.crossfadeFadeOutDelay = Math.round(patch.fadeOutDelay / 1000);
+          lex.fadeOutDelay = patch.fadeOutDelay;
+        }
+        if (patch.fadeOutDuration !== undefined) {
+          next.crossfadeFadeOutDuration = Math.round(patch.fadeOutDuration / 1000);
+          lex.fadeOutDuration = patch.fadeOutDuration;
+        }
+        if (patch.fadeOutMixMode !== undefined) {
+          next.crossfadeFadeOutMixmode = FADE_MIX_TO_INT[patch.fadeOutMixMode];
+          lex.fadeOutMixMode = patch.fadeOutMixMode;
+        }
+        return next;
+      });
+      scheduleLexiconFlush("crossfade", lex);
     },
 
     setReplayGain(patch) {
-      if (!did) return;
-      const cur = rockboxQ.data?.replaygainSettings ?? { noclip: false, type: 0, preamp: 0 };
-      const next = {
-        noclip: patch.preventClipping ?? cur.noclip,
-        type: patch.mode !== undefined ? REPLAYGAIN_TO_INT[patch.mode] : cur.type,
-        preamp: patch.preamp ?? cur.preamp,
-      };
       const lex: LexReplayGain = {};
+      setSettings((prev) => {
+        const cur = prev.replaygainSettings;
+        const next = {
+          noclip: patch.preventClipping ?? cur.noclip,
+          type: patch.mode !== undefined ? REPLAYGAIN_TO_INT[patch.mode] : cur.type,
+          preamp: patch.preamp ?? cur.preamp,
+        };
+        return { ...prev, replaygainSettings: next };
+      });
       if (patch.mode !== undefined) lex.mode = patch.mode;
       if (patch.preamp !== undefined) lex.preamp = patch.preamp;
       if (patch.preventClipping !== undefined) lex.preventClipping = patch.preventClipping;
-      enqueue(did, qc, "replayGain", { replaygainSettings: next }, lex);
+      scheduleLexiconFlush("replayGain", lex);
     },
   };
 
   return {
-    data: rockboxQ.data,
-    isLoading: rockboxQ.isLoading,
-    isError: rockboxQ.isError,
+    data: settings,
+    isLoading: false,
+    isError: lexiconQ.isError,
     actions,
   };
 }
diff --git a/apps/web/src/hooks/useQueueSync.tsx b/apps/web/src/hooks/useQueueSync.tsx
deleted file mode 100644
index 846aa10d..00000000
--- a/apps/web/src/hooks/useQueueSync.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useAtomValue, useSetAtom } from "jotai";
-import { useEffect } from "react";
-import { profileAtom } from "../atoms/profile";
-import { playerAtom } from "../atoms/player";
-import { queueAtom, queueIndexAtom, type QueueTrack } from "../atoms/queue";
-import { getCurrentPlaylist } from "../lib/rockbox-graphql";
-
-// useQueueSync — read-only mirror of rockbox's current playlist into the
-// web app's queue atoms.
-//
-// Why poll rather than subscribe? Rockbox's GraphQL doesn't expose a
-// subscription for playlist changes, and a server-sent-event channel would
-// have to traverse the CF Worker → Fly router → machine path which doesn't
-// guarantee SSE flushing. Polling every 3s while a rockbox track is active
-// is cheap (~30 bytes uncompressed JSON over a warm HTTP/2 stream) and good
-// enough for "I just queued a track on my phone, the laptop UI updated".
-//
-// v1 is one-way: rockbox is the source of truth. Web actions that change the
-// queue (insertTracks etc.) call the rockbox mutations directly; the next
-// poll picks up the change.
-
-const POLL_INTERVAL_MS = 3000;
-
-function toQueueTrack(t: {
-  id: string;
-  title: string;
-  artist: string;
-  album: string;
-  albumArt: string | null;
-  path: string;
-  length: number;
-}): QueueTrack {
-  return {
-    uploadId: t.id,
-    title: t.title,
-    artist: t.artist,
-    albumArtist: t.artist,
-    album: t.album,
-    albumArt: t.albumArt,
-    duration: t.length,
-    sha256: "",
-    songUri: "",
-    streamUrl: t.path,
-  };
-}
-
-export function useQueueSync() {
-  const profile = useAtomValue(profileAtom);
-  const player = useAtomValue(playerAtom);
-  const setQueue = useSetAtom(queueAtom);
-  const setIndex = useSetAtom(queueIndexAtom);
-  const did = profile?.did ?? "";
-
-  useEffect(() => {
-    // Only sync while the rockbox player is active. Spotify or no-player =
-    // local queue atom is the source of truth.
-    if (!did || player !== "rockbox") return;
-
-    let cancelled = false;
-
-    const poll = async () => {
-      try {
-        const pl = await getCurrentPlaylist(did);
-        if (cancelled || !pl) return;
-        setQueue(pl.tracks.map(toQueueTrack));
-        setIndex(pl.index);
-      } catch (err) {
-        // Container may be cold or transient network issue — the next tick
-        // will retry. Don't spam the console.
-        if (process.env.NODE_ENV === "development") {
-          console.debug("[useQueueSync] poll failed:", err);
-        }
-      }
-    };
-
-    // Fetch once immediately, then on interval.
-    void poll();
-    const id = setInterval(poll, POLL_INTERVAL_MS);
-    return () => {
-      cancelled = true;
-      clearInterval(id);
-    };
-  }, [did, player, setQueue, setIndex]);
-}
diff --git a/apps/web/src/hooks/useRockboxDSP.ts b/apps/web/src/hooks/useRockboxDSP.ts
deleted file mode 100644
index 77252880..00000000
--- a/apps/web/src/hooks/useRockboxDSP.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useAtomValue } from "jotai";
-import { useEffect, useRef, type RefObject } from "react";
-import { eqBandsAtom, eqEnabledAtom, EQ_Q } from "../atoms/equalizer";
-
-interface AudioGraph {
-  ctx: AudioContext;
-  filters: BiquadFilterNode[];
-}
-
-export function useRockboxDSP(audioRef: RefObject<HTMLAudioElement | null>) {
-  const eqEnabled = useAtomValue(eqEnabledAtom);
-  const eqBands = useAtomValue(eqBandsAtom);
-  const graphRef = useRef<AudioGraph | null>(null);
-
-  // Always-fresh refs so the play-event closure sees the latest EQ state.
-  const eqEnabledRef = useRef(eqEnabled);
-  const eqBandsRef = useRef(eqBands);
-  eqEnabledRef.current = eqEnabled;
-  eqBandsRef.current = eqBands;
-
-  // Build the Web Audio graph on the first play event.
-  //
-  // Why on "play" and not on EQ-enable:
-  //   - iOS Safari requires AudioContext creation to happen synchronously
-  //     inside a user-gesture call stack. useEffect runs after paint, outside
-  //     that stack. The play-button tap fires "play" synchronously, giving us
-  //     the gesture context we need.
-  //
-  // Why crossOrigin="anonymous" is required on the <audio> element:
-  //   - Without it the Web Audio spec silently mutes the graph output for
-  //     cross-origin media while still playing audio through the default sink.
-  //     The filter chain exists but processes silence — hence "EQ does nothing".
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const init = () => {
-      if (graphRef.current) return;
-      try {
-        const ctx = new AudioContext();
-        ctx.resume().catch(() => {});
-
-        const source = ctx.createMediaElementSource(audio);
-        const bands = eqBandsRef.current;
-
-        const filters: BiquadFilterNode[] = bands.map((band, i) => {
-          const f = ctx.createBiquadFilter();
-          if (i === 0) {
-            f.type = "lowshelf";
-            f.Q.value = 0.7;
-          } else if (i === bands.length - 1) {
-            f.type = "highshelf";
-            f.Q.value = 0.7;
-          } else {
-            f.type = "peaking";
-            f.Q.value = EQ_Q;
-          }
-          f.frequency.value = band.cutoff;
-          f.gain.value = 0;
-          return f;
-        });
-
-        source.connect(filters[0]);
-        for (let i = 0; i < filters.length - 1; i++) {
-          filters[i].connect(filters[i + 1]);
-        }
-        filters[filters.length - 1].connect(ctx.destination);
-
-        graphRef.current = { ctx, filters };
-
-        // Apply whatever EQ state is active at init time.
-        const enabled = eqEnabledRef.current;
-        const b = eqBandsRef.current;
-        filters.forEach((f, idx) => {
-          f.gain.value = enabled ? b[idx].gain : 0;
-        });
-      } catch (err) {
-        console.warn("[EQ] Web Audio init failed:", err);
-      }
-    };
-
-    const onPlay = () => {
-      graphRef.current?.ctx.resume().catch(() => {});
-      init();
-    };
-
-    audio.addEventListener("play", onPlay);
-    if (!audio.paused) init();
-
-    return () => {
-      audio.removeEventListener("play", onPlay);
-      graphRef.current?.ctx.close().catch(() => {});
-      graphRef.current = null;
-    };
-  }, [audioRef]);
-
-  // Real-time sync: push every EQ change to the filter parameters.
-  useEffect(() => {
-    const graph = graphRef.current;
-    if (!graph) return;
-    graph.filters.forEach((filter, i) => {
-      filter.gain.value = eqEnabled ? eqBands[i].gain : 0;
-    });
-  }, [eqEnabled, eqBands]);
-}
diff --git a/apps/web/src/hooks/useRockboxEngine.ts b/apps/web/src/hooks/useRockboxEngine.ts
new file mode 100644
index 00000000..3c9a19aa
--- /dev/null
+++ b/apps/web/src/hooks/useRockboxEngine.ts
@@ -0,0 +1,138 @@
+import { useAtomValue, useSetAtom } from "jotai";
+import { useEffect } from "react";
+import { nowPlayingAtom } from "../atoms/nowpaying";
+import { playerAtom } from "../atoms/player";
+import { queueAtom, queueIndexAtom, type QueueTrack } from "../atoms/queue";
+import {
+  getRockboxPlayer,
+  trackForUrl,
+  uploadIdFromUrl,
+} from "../lib/audio/rockbox-engine";
+
+// useRockboxEngine — the bridge between the in-browser rockbox-wasm engine and
+// the app's jotai atoms. Mount it once (in StickyPlayerWithData).
+//
+// This replaces the old GraphQL polling (pollRockbox + pollQueue): the engine
+// emits `track`, `progress`, `status` and `queue` events, and we translate each
+// into the same atoms the UI already reads. No network, no HLS.
+
+/** Build a QueueTrack from a queue URL, using the metadata registry when we
+ *  enqueued it ourselves, else a bare URL-only fallback. */
+function urlToQueueTrack(url: string): QueueTrack {
+  const known = trackForUrl(url);
+  if (known) return known;
+  return {
+    uploadId: uploadIdFromUrl(url) ?? url,
+    title: url.split("/").pop() ?? url,
+    artist: "",
+    albumArtist: "",
+    album: "",
+    albumArt: null,
+    duration: 0,
+    sha256: "",
+    songUri: "",
+    streamUrl: url,
+  };
+}
+
+export function useRockboxEngine() {
+  const player = useAtomValue(playerAtom);
+  const setNowPlaying = useSetAtom(nowPlayingAtom);
+  const setQueue = useSetAtom(queueAtom);
+  const setQueueIndex = useSetAtom(queueIndexAtom);
+  const setPlayer = useSetAtom(playerAtom);
+
+  useEffect(() => {
+    // Only mirror engine state while the rockbox engine owns playback. Spotify
+    // (or nothing) → leave the atoms to their own source of truth.
+    if (player !== "rockbox") return;
+    const p = getRockboxPlayer();
+
+    // track: a new track started — refresh full now-playing metadata.
+    const onTrack = (e: {
+      index: number;
+      url: string;
+      metadata: { title?: string; artist?: string; duration_ms?: number } | null;
+    }) => {
+      const known = trackForUrl(e.url);
+      const md = e.metadata;
+      setNowPlaying((prev) => ({
+        title: known?.title ?? md?.title ?? e.url.split("/").pop() ?? "",
+        artist: known?.artist ?? md?.artist ?? "",
+        artistUri: "",
+        songUri: known?.songUri ?? "",
+        albumUri: "",
+        duration: known?.duration ?? md?.duration_ms ?? prev?.duration ?? 0,
+        progress: 0,
+        albumArt: known?.albumArt ?? prev?.albumArt ?? undefined,
+        isPlaying: true,
+        sha256: known?.sha256 ?? "",
+        liked: prev?.liked ?? false,
+      }));
+      // NB: don't set the queue index here — the `track` event reports the
+      // index captured when the track started loading, which can be stale if
+      // the queue was reordered (background-fill) meanwhile. onStatus / onQueue
+      // carry the live index.
+    };
+
+    // progress: once-per-second elapsed/duration + play state.
+    const onProgress = (e: {
+      state: "stopped" | "playing" | "paused";
+      elapsed_ms: number;
+      duration_ms: number;
+    }) => {
+      setNowPlaying((prev) =>
+        prev
+          ? {
+              ...prev,
+              progress: e.elapsed_ms,
+              duration: e.duration_ms || prev.duration,
+              isPlaying: e.state === "playing",
+            }
+          : prev,
+      );
+    };
+
+    // status: transport / queue-length / index. We deliberately do NOT clear
+    // nowPlaying/player here. The engine emits a `stopped, queue_len: 0` status
+    // while it boots (before setQueue runs); treating that as "playback ended"
+    // would null the optimistic now-playing AND flip player away from rockbox —
+    // which detaches these very listeners, so playback continues audibly while
+    // the mini-player vanishes for good. The player stays visible while playing
+    // and after the queue ends (paused on the last track).
+    const onStatus = (e: {
+      state: "stopped" | "playing" | "paused";
+      index: number;
+      queue_len: number;
+    }) => {
+      if (e.index >= 0) setQueueIndex(e.index);
+      setNowPlaying((prev) =>
+        prev ? { ...prev, isPlaying: e.state === "playing" } : prev,
+      );
+    };
+
+    // queue: the URL list changed — rebuild the queue atom from metadata.
+    const onQueue = (e: { urls: string[]; index: number }) => {
+      setQueue(e.urls.map(urlToQueueTrack));
+      setQueueIndex(e.index);
+    };
+
+    p.on("track", onTrack);
+    p.on("progress", onProgress);
+    p.on("status", onStatus);
+    p.on("queue", onQueue);
+
+    // Seed the atoms from the engine's current snapshot on (re)mount.
+    if (p.queue.length) {
+      setQueue(p.queue.map(urlToQueueTrack));
+      setQueueIndex(p.state.index);
+    }
+
+    return () => {
+      p.off("track", onTrack);
+      p.off("progress", onProgress);
+      p.off("status", onStatus);
+      p.off("queue", onQueue);
+    };
+  }, [player, setNowPlaying, setQueue, setQueueIndex, setPlayer]);
+}
diff --git a/apps/web/src/hooks/useUploadPlayer.ts b/apps/web/src/hooks/useUploadPlayer.ts
index 7489d5de..1e7df84f 100644
--- a/apps/web/src/hooks/useUploadPlayer.ts
+++ b/apps/web/src/hooks/useUploadPlayer.ts
@@ -1,42 +1,26 @@
 import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback } from "react";
+import { InsertMode } from "rockbox-wasm";
 import { nowPlayingAtom } from "../atoms/nowpaying";
 import { playerAtom } from "../atoms/player";
-import { profileAtom } from "../atoms/profile";
 import { queueAtom, queueIndexAtom, type QueueTrack } from "../atoms/queue";
-import { ensureStreamToken, getStreamUrl } from "../api/uploads";
+import { ensureStreamToken } from "../api/uploads";
 import {
-  PLAYLIST_INSERT_FIRST,
-  PLAYLIST_INSERT_LAST,
-  getCurrentPlaylist,
-  insertTracks,
-  playTrack,
-} from "../lib/rockbox-graphql";
-import { hlsAudio } from "../lib/hls-audio";
-import { ROCKBOX_URL } from "../consts";
+  ensureRockboxReady,
+  registerTracks,
+  streamUrlFor,
+} from "../lib/audio/rockbox-engine";
 
-// useUploadPlayer — thin orchestrator around rockbox playlist mutations.
+// useUploadPlayer — orchestrates the in-browser rockbox-wasm queue.
 //
-// IMPORTANT: rockbox is the ONLY source of truth for the queue. This hook
-// does NOT mutate queueAtom or queueIndexAtom locally — it calls the rockbox
-// GraphQL mutations, then refetches `playlistGetCurrent` and writes the
-// result into the atoms. The queue UI (QueuePanel) reads those atoms and
-// always reflects rockbox's view.
+// Playback runs entirely in the browser now (decoders + DSP in wasm). There is
+// no remote rockbox server and no HLS: these actions drive the local
+// RockboxPlayer's queue directly. The queue atoms are kept in sync by the
+// engine's `queue`/`status` events (see useRockboxEngine); we don't poll.
 //
-// Why no local optimistic update?
-//   - The previous code did setQueue(...) THEN insertTracks(...). The local
-//     splice index never matched rockbox's internal playlist position
-//     (rockbox uses signed PLAYLIST_INSERT_* constants for "play next" /
-//     "play last", not literal array indices). Result: the UI showed one
-//     order, rockbox played another, and the 5s background poll would
-//     eventually clobber the optimistic update with rockbox's reality.
-//   - StickyPlayerWithData also polls `playlistGetCurrent` every 5s, so any
-//     race with the local atom would surface on the next tick anyway.
-//
-// Position constants (apps/playlist.h in rockbox firmware):
-//   PLAYLIST_INSERT_FIRST = -4   → insert AFTER current track  ("play next")
-//   PLAYLIST_INSERT_LAST  = -3   → append at end               ("play last")
-//   Anything ≥ 0 means a LITERAL index — almost never what you want here.
+// The wasm queue holds URLs only, so before enqueuing we register each track in
+// the metadata registry (uploadId → QueueTrack) so the UI can map queue/track
+// URLs back to rich metadata.
 
 function trackToNowPlaying(track: QueueTrack, isPlaying = true) {
   return {
@@ -57,144 +41,73 @@ function trackToNowPlaying(track: QueueTrack, isPlaying = true) {
 export function useUploadPlayer() {
   const queue = useAtomValue(queueAtom);
   const queueIndex = useAtomValue(queueIndexAtom);
-  const setQueue = useSetAtom(queueAtom);
-  const setQueueIndex = useSetAtom(queueIndexAtom);
   const setNowPlaying = useSetAtom(nowPlayingAtom);
   const setPlayer = useSetAtom(playerAtom);
-  const profile = useAtomValue(profileAtom);
-
-  const did = profile?.did ?? "";
-  const hlsUrl = did ? `${ROCKBOX_URL}/${did}/hls/audio.m3u8` : "";
-
-  // Refresh queueAtom from rockbox's authoritative state. Called after every
-  // playlist mutation so the UI converges to rockbox's view within one round
-  // trip instead of waiting for the next background poll.
-  const refreshQueue = useCallback(async () => {
-    if (!did) return;
-    try {
-      const pl = await getCurrentPlaylist(did);
-      if (!pl) return;
-      setQueueIndex(pl.index);
-      setQueue(
-        pl.tracks.map((t) => ({
-          uploadId: t.id,
-          title: t.title,
-          artist: t.artist,
-          albumArtist: t.artist,
-          album: t.album,
-          albumArt: t.albumArt
-            ? t.albumArt.startsWith("http")
-              ? t.albumArt
-              : `${ROCKBOX_URL}/${did}/covers/${t.albumArt}`
-            : null,
-          duration: t.length,
-          sha256: "",
-          songUri: t.path,
-          streamUrl: t.path,
-        })),
-      );
-    } catch (e) {
-      console.warn("[useUploadPlayer] refreshQueue failed:", e);
-    }
-  }, [did, setQueue, setQueueIndex]);
 
   const playNow = useCallback(
     async (tracks: QueueTrack[], startIndex = 0) => {
-      if (!did) return;
-      // For "play now" we DO update the now-playing optimistically so the
-      // sticky player shows the new track instantly — queue position will be
-      // reconciled by refreshQueue once rockbox confirms.
+      if (!tracks.length) return;
+      // Optimistic now-playing so the sticky player reacts instantly; the
+      // engine's track/status events reconcile the rest.
       setNowPlaying(trackToNowPlaying(tracks[startIndex]));
       setPlayer("rockbox");
-      hlsAudio.attach(hlsUrl);
 
+      // Boot the engine FIRST, synchronously within the click's user gesture.
+      // Creating the AudioContext after an awaited network call (the stream
+      // token) lands outside the gesture, and Chrome then rejects the worklet
+      // load with "Unable to load a worklet's module".
+      const p = await ensureRockboxReady();
       await ensureStreamToken();
 
-      // playTrack creates a fresh playlist with this single track and starts
-      // playback. Then enqueue the rest using PLAYLIST_INSERT_LAST so they
-      // append in order. Rockbox can't accept multiple files in one request,
-      // so we loop.
-      const startUrl =
-        tracks[startIndex].streamUrl ?? getStreamUrl(tracks[startIndex].uploadId);
-      await playTrack(did, startUrl).catch(console.warn);
-
-      const after = tracks.slice(startIndex + 1);
-      const before = tracks.slice(0, startIndex);
-      for (const track of [...after, ...before]) {
-        await insertTracks(
-          did,
-          [track.streamUrl ?? getStreamUrl(track.uploadId)],
-          PLAYLIST_INSERT_LAST,
-        ).catch(console.warn);
-      }
-
-      await refreshQueue();
+      registerTracks(tracks);
+      const urls = tracks.map(streamUrlFor);
+      // Start ONLY the chosen track so playback begins as fast as possible —
+      // the engine downloads/decodes just this one file.
+      p.setQueue([urls[startIndex]], true);
+      // Then fill the rest of the queue in the background. These are URL
+      // strings only: the engine fetches each subsequent track lazily when it's
+      // reached, so nothing else downloads up front. insert() renumbers the
+      // current index and never restarts the playing track, so the album keeps
+      // its natural order with the chosen track current.
+      const after = urls.slice(startIndex + 1);
+      const before = urls.slice(0, startIndex);
+      if (after.length) p.insert(after, InsertMode.PlayLast);
+      if (before.length) p.insert(before, InsertMode.Prepend);
     },
-    [did, hlsUrl, setNowPlaying, setPlayer, refreshQueue],
+    [setNowPlaying, setPlayer],
   );
 
-  const playNext = useCallback(
-    async (track: QueueTrack) => {
-      if (!did) return;
-      await ensureStreamToken();
-      await insertTracks(
-        did,
-        [track.streamUrl ?? getStreamUrl(track.uploadId)],
-        PLAYLIST_INSERT_FIRST, // ← was 1 (literal index), now correctly "after current"
-      ).catch(console.warn);
-      await refreshQueue();
-    },
-    [did, refreshQueue],
-  );
+  const playNext = useCallback(async (track: QueueTrack) => {
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks([track]);
+    p.insert(streamUrlFor(track), InsertMode.PlayNext);
+  }, []);
 
-  const playNextAll = useCallback(
-    async (tracks: QueueTrack[]) => {
-      if (!did) return;
-      await ensureStreamToken();
-      // Reverse-iterate: each insert pushes the previous "next" down by one,
-      // so to preserve the user's intended order we insert the LAST track
-      // first. After N inserts, the list is [current, t0, t1, ..., tN].
-      for (const track of [...tracks].reverse()) {
-        await insertTracks(
-          did,
-          [track.streamUrl ?? getStreamUrl(track.uploadId)],
-          PLAYLIST_INSERT_FIRST,
-        ).catch(console.warn);
-      }
-      await refreshQueue();
-    },
-    [did, refreshQueue],
-  );
+  const playNextAll = useCallback(async (tracks: QueueTrack[]) => {
+    if (!tracks.length) return;
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks(tracks);
+    // insert() with an array keeps the batch's order directly after the
+    // current track (Rockbox's PlayNext), so no manual reversal is needed.
+    p.insert(tracks.map(streamUrlFor), InsertMode.PlayNext);
+  }, []);
 
-  const playLast = useCallback(
-    async (track: QueueTrack) => {
-      if (!did) return;
-      await ensureStreamToken();
-      await insertTracks(
-        did,
-        [track.streamUrl ?? getStreamUrl(track.uploadId)],
-        PLAYLIST_INSERT_LAST, // ← was -1 (== PLAYLIST_PREPEND, wrong end!), now appends
-      ).catch(console.warn);
-      await refreshQueue();
-    },
-    [did, refreshQueue],
-  );
+  const playLast = useCallback(async (track: QueueTrack) => {
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks([track]);
+    p.insert(streamUrlFor(track), InsertMode.PlayLast);
+  }, []);
 
-  const playLastAll = useCallback(
-    async (tracks: QueueTrack[]) => {
-      if (!did) return;
-      await ensureStreamToken();
-      for (const track of tracks) {
-        await insertTracks(
-          did,
-          [track.streamUrl ?? getStreamUrl(track.uploadId)],
-          PLAYLIST_INSERT_LAST,
-        ).catch(console.warn);
-      }
-      await refreshQueue();
-    },
-    [did, refreshQueue],
-  );
+  const playLastAll = useCallback(async (tracks: QueueTrack[]) => {
+    if (!tracks.length) return;
+    const p = await ensureRockboxReady();
+    await ensureStreamToken();
+    registerTracks(tracks);
+    p.insert(tracks.map(streamUrlFor), InsertMode.PlayLast);
+  }, []);
 
   return {
     queue,
@@ -204,6 +117,5 @@ export function useUploadPlayer() {
     playNextAll,
     playLast,
     playLastAll,
-    refreshQueue,
   };
 }
diff --git a/apps/web/src/lib/audio/rockbox-engine.ts b/apps/web/src/lib/audio/rockbox-engine.ts
new file mode 100644
index 00000000..d1902423
--- /dev/null
+++ b/apps/web/src/lib/audio/rockbox-engine.ts
@@ -0,0 +1,227 @@
+import { RockboxPlayer } from "rockbox-wasm";
+import { getStreamUrl } from "../../api/uploads";
+import { EQ_BANDS_HZ } from "../../atoms/equalizer";
+import type { QueueTrack } from "../../atoms/queue";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// In-browser Rockbox engine (decoders + DSP in WebAssembly).
+//
+// This is the ONE audible path for uploaded tracks. It replaces the former
+// remote rockbox server (GraphQL playlist + HLS output stream): playback,
+// decoding, the whole DSP chain, the queue and crossfade all run locally in
+// the browser now. Nothing here talks to a rockbox server or an HLS stream.
+//
+// The runtime assets (core/worker/worklet) are served from /rockbox/* — see the
+// cpSync step in vite.config.ts.
+// ─────────────────────────────────────────────────────────────────────────────
+
+let player: RockboxPlayer | null = null;
+
+/** The most recent DSP snapshot published via `publishAudioSettings`. Held so a
+ *  late-booting engine (init happens on a user gesture, which can land after the
+ *  settings have already loaded) can adopt the user's settings on `init()`. */
+let latestSettings: GlobalSettings | null = null;
+
+/** Lazy singleton. Cheap to construct (event wiring only); `init()` boots the
+ *  AudioContext so it must be reached from a user gesture (see ensureReady). */
+export function getRockboxPlayer(): RockboxPlayer {
+  if (!player) player = new RockboxPlayer({ baseUrl: "/rockbox" });
+  return player;
+}
+
+/** Boot the engine if needed (idempotent). Call from a user gesture. */
+export async function ensureRockboxReady(): Promise<RockboxPlayer> {
+  const p = getRockboxPlayer();
+  if (!p.ready) {
+    await p.init();
+    // Apply whatever DSP settings were last published (the engine may have
+    // booted after the settings loaded), so a fresh AudioContext starts with
+    // the user's EQ/crossfade/etc. rather than firmware defaults.
+    if (latestSettings) applyAudioSettings(p, latestSettings);
+  }
+  return p;
+}
+
+// ── Track metadata registry ──────────────────────────────────────────────────
+//
+// The wasm queue is a list of URLs — it has no idea about title, artist, album
+// art, etc. We keep a side registry mapping the EXACT stream URL we enqueue back
+// to the rich QueueTrack it came from. The engine stores and echoes queue URLs
+// verbatim (queue/track events), so an exact-string key round-trips reliably —
+// regardless of the URL shape (`.../uploads/<id>/stream?token=…`,
+// `.../stream?u=…`, etc.). (A prior version keyed on an uploadId parsed from the
+// path, which silently missed for `?u=`-style URLs and showed raw URLs instead
+// of titles.)
+
+const registry = new Map<string, QueueTrack>();
+
+/** Parse an uploadId out of a stream URL, when the path carries one. Only used
+ *  as a last-resort label for URLs we didn't enqueue ourselves. */
+export function uploadIdFromUrl(url: string): string | null {
+  const m = url.match(/\/uploads\/([^/]+)\/stream/);
+  return m ? m[1] : null;
+}
+
+/** The stream URL the engine should decode for a track. */
+export function streamUrlFor(track: QueueTrack): string {
+  return track.streamUrl ?? getStreamUrl(track.uploadId);
+}
+
+/** Remember tracks keyed by the exact URL they'll be enqueued as, so queue/
+ *  track events can be mapped back to full metadata. */
+export function registerTracks(tracks: QueueTrack[]): void {
+  tracks.forEach((t) => registry.set(streamUrlFor(t), t));
+}
+
+/** Rich QueueTrack for a queue/track URL, if we enqueued it ourselves. */
+export function trackForUrl(url: string): QueueTrack | undefined {
+  return registry.get(url);
+}
+
+// ── DSP settings → engine ────────────────────────────────────────────────────
+
+// Kept identical to the old rockbox-graphql `GlobalSettings` shape so the audio
+// settings UI (which reads these fields) is unchanged — only the source and the
+// sink moved (local atoms + the wasm engine instead of a rockbox server).
+export interface EqBand {
+  cutoff: number; // Hz
+  gain: number; // tenths of dB
+  q: number; // ×10
+}
+
+export interface ReplayGainSettings {
+  noclip: boolean;
+  type: number; // 0 off, 1 track, 2 album, 3 trackIfShuffling
+  preamp: number; // tenths of dB
+}
+
+export interface GlobalSettings {
+  volume: number;
+  playlistShuffle: boolean;
+  repeatMode: number; // 0 off, 1 all, 2 one, 3 shuffle, 4 a-b
+  bass: number;
+  bassCutoff: number;
+  treble: number;
+  trebleCutoff: number;
+  crossfade: number; // 0 off, 1 on, 2 shuffle, 3 album change, 4 track change
+  fadeOnStop: boolean;
+  crossfadeFadeInDelay: number; // seconds
+  crossfadeFadeInDuration: number; // seconds
+  crossfadeFadeOutDelay: number; // seconds
+  crossfadeFadeOutDuration: number; // seconds
+  crossfadeFadeOutMixmode: number; // 0 crossfade, 1 mix
+  balance: number;
+  stereoWidth: number;
+  stereoswMode: number;
+  channelConfig: number; // 0 stereo, 1 mono, 2 custom, 3 mono-left, 4 mono-right, 5 karaoke
+  ditheringEnabled: boolean;
+  partyMode: boolean;
+  playerName: string;
+  eqEnabled: boolean;
+  eqBandSettings: EqBand[];
+  replaygainSettings: ReplayGainSettings;
+}
+
+export type SettingsPatch = Partial<{
+  volume: number;
+  playlistShuffle: boolean;
+  repeatMode: number;
+  bass: number;
+  bassCutoff: number;
+  treble: number;
+  trebleCutoff: number;
+  crossfade: number;
+  fadeOnStop: boolean;
+  fadeInDelay: number;
+  fadeInDuration: number;
+  fadeOutDelay: number;
+  fadeOutDuration: number;
+  fadeOutMixmode: number;
+  balance: number;
+  stereoWidth: number;
+  stereoswMode: number;
+  channelConfig: number;
+  ditheringEnabled: boolean;
+  partyMode: boolean;
+  playerName: string;
+  eqEnabled: boolean;
+  eqBandSettings: EqBand[];
+  eqPrecut: number;
+  replaygainSettings: ReplayGainSettings;
+}>;
+
+// rocksky's crossfade mode ints don't line up 1:1 with rockbox-wasm's
+// CrossfadeMode enum, so map explicitly. rocksky: 0 off, 1 always, 2 shuffle,
+// 3 album-change, 4 track-change → wasm: 0 Off, 1 AutoSkip, 3 Shuffle, 5 Always.
+const CROSSFADE_TO_WASM = [0, 5, 3, 1, 1];
+
+/** Firmware-ish defaults used before any saved settings load. Mirrors the old
+ *  rockbox server's initial GlobalSettings closely enough for the UI + engine. */
+export const DEFAULT_GLOBAL_SETTINGS: GlobalSettings = {
+  volume: 100,
+  playlistShuffle: false,
+  repeatMode: 0,
+  bass: 0,
+  bassCutoff: 200,
+  treble: 0,
+  trebleCutoff: 3500,
+  crossfade: 0,
+  fadeOnStop: true,
+  crossfadeFadeInDelay: 0,
+  crossfadeFadeInDuration: 2,
+  crossfadeFadeOutDelay: 0,
+  crossfadeFadeOutDuration: 2,
+  crossfadeFadeOutMixmode: 0,
+  balance: 0,
+  stereoWidth: 100,
+  stereoswMode: 0,
+  channelConfig: 0,
+  ditheringEnabled: false,
+  partyMode: false,
+  playerName: "",
+  eqEnabled: false,
+  eqBandSettings: EQ_BANDS_HZ.map((cutoff) => ({
+    cutoff,
+    gain: 0,
+    q: 10,
+  })),
+  replaygainSettings: { noclip: false, type: 0, preamp: 0 },
+};
+
+/** Push the whole DSP snapshot to the engine. Cheap + idempotent — call it on
+ *  init and whenever any audio setting changes. Units mirror rockbox: EQ gain
+ *  in tenths of dB, Q ×10; tone in whole dB; crossfade delays/durations in
+ *  seconds; replaygain preamp in tenths of dB. */
+export function applyAudioSettings(
+  p: RockboxPlayer,
+  s: GlobalSettings,
+): void {
+  p.setEqEnabled(s.eqEnabled);
+  // Band centre frequencies are fixed physical constants (the 10 rockbox bands),
+  // keyed by index — never trust a cutoff that may have been persisted from an
+  // older band table. Only the gain is user data.
+  s.eqBandSettings.forEach((b, i) =>
+    p.setEqBand(i, EQ_BANDS_HZ[i] ?? b.cutoff, b.q / 10, b.gain / 10),
+  );
+  p.setTone(s.bass, s.treble);
+  p.setToneCutoffs(s.bassCutoff, s.trebleCutoff);
+  p.setCrossfade(CROSSFADE_TO_WASM[s.crossfade] ?? 0, {
+    fadeInDelay: s.crossfadeFadeInDelay,
+    fadeInDuration: s.crossfadeFadeInDuration,
+    fadeOutDelay: s.crossfadeFadeOutDelay,
+    fadeOutDuration: s.crossfadeFadeOutDuration,
+    mixMode: s.crossfadeFadeOutMixmode,
+  });
+  p.setChannelMode(s.channelConfig);
+  p.setStereoWidth(s.stereoWidth);
+  const rg = s.replaygainSettings;
+  p.setReplaygain(rg.type, rg.noclip, rg.preamp / 10);
+}
+
+/** Publish the current DSP snapshot: remember it (so a late `init()` adopts it)
+ *  and, if the engine is already running, push it live. Safe to call before the
+ *  engine has booted — it'll be applied on the next `ensureRockboxReady()`. */
+export function publishAudioSettings(s: GlobalSettings): void {
+  latestSettings = s;
+  if (player?.ready) applyAudioSettings(player, s);
+}
diff --git a/apps/web/src/lib/hls-audio.ts b/apps/web/src/lib/hls-audio.ts
deleted file mode 100644
index 44ce791f..00000000
--- a/apps/web/src/lib/hls-audio.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import Hls from "hls.js";
-import { useEffect, useState } from "react";
-
-export interface HlsAudioState {
-  attached: boolean;
-  url: string | null;
-  playing: boolean;
-  volume: number;
-  muted: boolean;
-}
-
-export class HlsAudioController {
-  private audio: HTMLAudioElement;
-  private hls: Hls | null = null;
-  private currentUrl: string | null = null;
-  private volume = 1.0;
-  private muted = false;
-  private listeners = new Set<(state: HlsAudioState) => void>();
-  private retryTimer: ReturnType<typeof setTimeout> | null = null;
-
-  constructor() {
-    this.audio = new Audio();
-    this.audio.preload = "none";
-    this.audio.crossOrigin = "anonymous";
-    this.audio.setAttribute("data-rockbox-hls", "1");
-    this.audio.style.display = "none";
-    if (typeof document !== "undefined" && document.body) {
-      document.body.appendChild(this.audio);
-    }
-    this.audio.addEventListener("play", () => this.emit());
-    this.audio.addEventListener("pause", () => this.emit());
-    this.audio.addEventListener("ended", () => {
-      this.emit();
-      // Schedule a reattach so the stream recovers automatically when
-      // rockbox starts the next track and new HLS segments appear.
-      this.scheduleReattach(2000);
-    });
-    this.audio.addEventListener("volumechange", () => {
-      this.volume = this.audio.volume;
-      this.muted = this.audio.muted;
-      this.emit();
-    });
-  }
-
-  attach(url: string) {
-    if (this.currentUrl === url && this.hls !== null) return;
-    this.detach();
-    this.currentUrl = url;
-
-    if (Hls.isSupported()) {
-      this.hls = new Hls({
-        liveSyncDuration: 4,
-        liveMaxLatencyDuration: 8,
-        backBufferLength: 30,
-      });
-      this.hls.loadSource(url);
-      this.hls.attachMedia(this.audio);
-      this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        this.tryAutoplay();
-      });
-      this.hls.on(Hls.Events.ERROR, (_, data) => {
-        if (!data.fatal) return;
-        if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
-          try {
-            this.hls?.recoverMediaError();
-            return;
-          } catch {
-            // fall through to reattach
-          }
-        }
-        this.scheduleReattach();
-      });
-    } else if (this.audio.canPlayType("application/vnd.apple.mpegurl")) {
-      this.audio.src = url;
-      this.tryAutoplay();
-    }
-    this.emit();
-  }
-
-  detach() {
-    if (this.retryTimer !== null) {
-      clearTimeout(this.retryTimer);
-      this.retryTimer = null;
-    }
-    if (this.hls) {
-      this.hls.destroy();
-      this.hls = null;
-    }
-    if (!this.audio.paused) this.audio.pause();
-    this.audio.removeAttribute("src");
-    this.currentUrl = null;
-    this.emit();
-  }
-
-  private scheduleReattach(delayMs = 1500) {
-    if (this.retryTimer !== null || !this.currentUrl) return;
-    const url = this.currentUrl;
-    this.retryTimer = setTimeout(() => {
-      this.retryTimer = null;
-      this.detach();
-      this.attach(url);
-    }, delayMs);
-  }
-
-  pause() {
-    if (!this.audio.paused) this.audio.pause();
-  }
-
-  resume() {
-    if (this.audio.muted) this.audio.muted = false;
-    // After a track ends the audio element is in a terminal state. For hls.js,
-    // reset the load position to the live edge and call play() in the same
-    // tick so the browser's user-gesture context is preserved (detach+reattach
-    // loses it because MANIFEST_PARSED fires across async ticks).
-    if (this.audio.ended && this.hls) {
-      this.hls.stopLoad();
-      this.hls.startLoad(-1); // -1 = live edge
-      this.audio.play().catch((e) => console.warn("[hls-audio] resume blocked:", e));
-      return;
-    }
-    // Fallback for native Safari HLS path (no hls.js instance).
-    if (this.audio.ended && this.currentUrl) {
-      this.audio.load();
-      this.audio.play().catch((e) => console.warn("[hls-audio] resume blocked:", e));
-      return;
-    }
-    this.seekToLiveEdge();
-    this.audio.play().catch((e) => console.warn("[hls-audio] resume blocked:", e));
-  }
-
-  private seekToLiveEdge() {
-    if (!this.hls) return;
-    const pos = this.hls.liveSyncPosition;
-    if (typeof pos !== "number" || isNaN(pos) || pos <= 0) return;
-    if (this.audio.currentTime >= pos) return;
-    try {
-      this.audio.currentTime = pos;
-    } catch {
-      // hls.js will handle buffering
-    }
-  }
-
-  private tryAutoplay() {
-    this.audio.play().catch(() => {
-      this.audio.muted = true;
-      this.audio.play().catch((e) => console.warn("[hls-audio] muted autoplay blocked:", e));
-    });
-  }
-
-  setVolume(v: number) {
-    const clamped = Math.max(0, Math.min(1, v));
-    this.audio.volume = clamped;
-    if (clamped > 0 && this.audio.muted) this.audio.muted = false;
-    if (this.audio.paused && this.currentUrl) {
-      this.seekToLiveEdge();
-      this.audio.play().catch(() => {});
-    }
-  }
-
-  toggleMute() {
-    this.audio.muted = !this.audio.muted;
-  }
-
-  state(): HlsAudioState {
-    return {
-      attached: this.currentUrl !== null,
-      url: this.currentUrl,
-      playing: !this.audio.paused && !this.audio.ended,
-      volume: this.volume,
-      muted: this.muted,
-    };
-  }
-
-  subscribe(fn: (state: HlsAudioState) => void): () => void {
-    this.listeners.add(fn);
-    fn(this.state());
-    return () => this.listeners.delete(fn);
-  }
-
-  private emit() {
-    const s = this.state();
-    this.listeners.forEach((fn) => fn(s));
-  }
-}
-
-export const hlsAudio = new HlsAudioController();
-
-export function useHlsAudio(): HlsAudioState {
-  const [state, setState] = useState<HlsAudioState>(hlsAudio.state());
-  useEffect(() => hlsAudio.subscribe(setState), []);
-  return state;
-}
diff --git a/apps/web/src/lib/rockbox-graphql.ts b/apps/web/src/lib/rockbox-graphql.ts
deleted file mode 100644
index 470cfd28..00000000
--- a/apps/web/src/lib/rockbox-graphql.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import { ROCKBOX_URL } from "../consts";
-
-async function gql<T>(did: string, query: string, variables?: Record<string, unknown>): Promise<T> {
-  const url = `${ROCKBOX_URL}/${did}/graphql`;
-  const res = await fetch(url, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ query, variables }),
-  });
-  const json = await res.json() as { data: T; errors?: { message: string }[] };
-  if (json.errors?.length) throw new Error(json.errors[0].message);
-  return json.data;
-}
-
-// ── Queries ──────────────────────────────────────────────────────────────────
-
-export interface RockboxTrack {
-  id: string;
-  title: string;
-  artist: string;
-  album: string;
-  albumArt: string | null;
-  artistId: string | null;
-  albumId: string | null;
-  elapsed: number;
-  length: number;
-}
-
-export interface RockboxQueueTrack {
-  id: string;
-  title: string;
-  artist: string;
-  album: string;
-  albumArt: string | null;
-  path: string;
-  length: number;
-}
-
-export interface RockboxPlaylist {
-  index: number;
-  amount: number;
-  tracks: RockboxQueueTrack[];
-}
-
-const CURRENT_TRACK_QUERY = `
-  query GetCurrentTrack {
-    currentTrack {
-      id title artist album albumArt artistId albumId elapsed length
-    }
-  }
-`;
-
-const PLAYBACK_STATUS_QUERY = `
-  query GetPlaybackStatus {
-    status
-  }
-`;
-
-const CURRENT_PLAYLIST_QUERY = `
-  query GetCurrentPlaylist {
-    playlistGetCurrent {
-      index amount
-      tracks { id title artist album albumArt path length }
-    }
-  }
-`;
-
-export async function getCurrentTrack(did: string): Promise<RockboxTrack | null> {
-  const data = await gql<{ currentTrack: RockboxTrack | null }>(did, CURRENT_TRACK_QUERY);
-  return data.currentTrack;
-}
-
-export async function getPlaybackStatus(did: string): Promise<number> {
-  const data = await gql<{ status: number }>(did, PLAYBACK_STATUS_QUERY);
-  return data.status;
-}
-
-export async function getCurrentPlaylist(did: string): Promise<RockboxPlaylist | null> {
-  const data = await gql<{ playlistGetCurrent: RockboxPlaylist | null }>(did, CURRENT_PLAYLIST_QUERY);
-  return data.playlistGetCurrent;
-}
-
-// ── Mutations ─────────────────────────────────────────────────────────────────
-
-export async function resumePlayback(did: string): Promise<void> {
-  await gql(did, `mutation { resume }`);
-}
-
-export async function pausePlayback(did: string): Promise<void> {
-  await gql(did, `mutation { pause }`);
-}
-
-export async function nextTrack(did: string): Promise<void> {
-  await gql(did, `mutation { next }`);
-}
-
-export async function previousTrack(did: string): Promise<void> {
-  await gql(did, `mutation { previous }`);
-}
-
-export async function seekTo(did: string, elapsed: number): Promise<void> {
-  await gql(did, `mutation Seek($e: Int!) { play(elapsed: $e, offset: 0) }`, { e: elapsed });
-}
-
-// Position constants for insertTracks — match rockbox firmware (apps/playlist.h).
-// Anyone passing a literal positive integer ends up inserting at that LITERAL
-// index in the playlist rather than relative-to-current, which is almost
-// never what you want. Always use one of these named values.
-export const PLAYLIST_PREPEND               = -1; // insert at top of playlist
-export const PLAYLIST_INSERT                = -2; // at last_insert_pos
-export const PLAYLIST_INSERT_LAST           = -3; // append at end ("play last")
-export const PLAYLIST_INSERT_FIRST          = -4; // insert after current ("play next")
-export const PLAYLIST_INSERT_SHUFFLED       = -5;
-export const PLAYLIST_REPLACE               = -6;
-export const PLAYLIST_INSERT_LAST_SHUFFLED  = -7;
-export const PLAYLIST_INSERT_LAST_ROTATED   = -8;
-
-// Insert tracks at a rockbox position constant (see PLAYLIST_* above).
-// After inserting, call startPlaylist to begin from an index.
-export async function insertTracks(did: string, tracks: string[], position: number): Promise<void> {
-  await gql(did, `
-    mutation InsertTracks($position: Int!, $tracks: [String!]!) {
-      insertTracks(position: $position, tracks: $tracks)
-    }
-  `, { position, tracks });
-}
-
-// Remove a single track from the current playlist by absolute index.
-export async function playlistRemoveTrack(did: string, index: number): Promise<void> {
-  await gql(did, `
-    mutation RemoveTrack($index: Int!) {
-      playlistRemoveTrack(index: $index)
-    }
-  `, { index });
-}
-
-// Wipe the current playlist.
-export async function playlistRemoveAllTracks(did: string): Promise<void> {
-  await gql(did, `mutation { playlistRemoveAllTracks }`);
-}
-
-// Shuffle the current playlist in place.
-export async function shufflePlaylist(did: string): Promise<void> {
-  await gql(did, `mutation { shufflePlaylist }`);
-}
-
-// Hard-stop playback (clears the audio buffer, useful before switching tracks).
-export async function hardStop(did: string): Promise<void> {
-  await gql(did, `mutation { hardStop }`);
-}
-
-export async function startPlaylist(did: string, startIndex: number): Promise<void> {
-  await gql(did, `
-    mutation StartPlaylist($startIndex: Int) {
-      playlistStart(startIndex: $startIndex, elapsed: 0, offset: 0)
-    }
-  `, { startIndex });
-}
-
-export async function playTrack(did: string, path: string): Promise<void> {
-  await gql(did, `
-    mutation PlayTrack($path: String!) {
-      playTrack(path: $path)
-    }
-  `, { path });
-}
-
-// ── Audio settings ────────────────────────────────────────────────────────────
-//
-// Numeric units in this section follow rockbox's wire format:
-//   * Gain / cut: tenths of dB (e.g. -30 = -3.0 dB)
-//   * Q factor:   tenths       (e.g. 70  = Q 7.0)
-//   * Balance:    -100..+100   (% of full L/R skew)
-//   * Crossfade duration: seconds
-//
-// All conversions to human units happen in the UI layer.
-
-export interface EqBand {
-  cutoff: number; // Hz
-  gain: number;   // tenths of dB
-  q: number;      // ×10
-}
-
-export interface ReplayGainSettings {
-  noclip: boolean;
-  type: number;   // 0 off, 1 track, 2 album, 3 trackIfShuffling
-  preamp: number; // tenths of dB
-}
-
-export interface GlobalSettings {
-  volume: number;
-  playlistShuffle: boolean;
-  repeatMode: number; // 0 off, 1 all, 2 one, 3 shuffle, 4 a-b
-  bass: number;
-  bassCutoff: number;
-  treble: number;
-  trebleCutoff: number;
-  crossfade: number;            // 0 off, 1 on, 2 shuffle, 3 album change, 4 track change
-  fadeOnStop: boolean;
-  crossfadeFadeInDelay: number;
-  crossfadeFadeInDuration: number;
-  crossfadeFadeOutDelay: number;
-  crossfadeFadeOutDuration: number;
-  crossfadeFadeOutMixmode: number;
-  balance: number;
-  stereoWidth: number;
-  stereoswMode: number;
-  channelConfig: number;        // 0 stereo, 1 mono, 2 custom, 3 mono-left, 4 mono-right, 5 karaoke
-  ditheringEnabled: boolean;
-  partyMode: boolean;
-  playerName: string;
-  eqEnabled: boolean;
-  eqBandSettings: EqBand[];
-  replaygainSettings: ReplayGainSettings;
-}
-
-export type SettingsPatch = Partial<{
-  volume: number;
-  playlistShuffle: boolean;
-  repeatMode: number;
-  bass: number;
-  bassCutoff: number;
-  treble: number;
-  trebleCutoff: number;
-  crossfade: number;
-  fadeOnStop: boolean;
-  fadeInDelay: number;
-  fadeInDuration: number;
-  fadeOutDelay: number;
-  fadeOutDuration: number;
-  fadeOutMixmode: number;
-  balance: number;
-  stereoWidth: number;
-  stereoswMode: number;
-  channelConfig: number;
-  ditheringEnabled: boolean;
-  partyMode: boolean;
-  playerName: string;
-  eqEnabled: boolean;
-  eqBandSettings: EqBand[];
-  eqPrecut: number;
-  replaygainSettings: ReplayGainSettings;
-}>;
-
-const GET_GLOBAL_SETTINGS = `
-  query GetGlobalSettings {
-    globalSettings {
-      volume playlistShuffle repeatMode
-      bass bassCutoff treble trebleCutoff
-      crossfade fadeOnStop
-      crossfadeFadeInDelay crossfadeFadeInDuration
-      crossfadeFadeOutDelay crossfadeFadeOutDuration crossfadeFadeOutMixmode
-      balance stereoWidth stereoswMode
-      channelConfig ditheringEnabled partyMode playerName
-      eqEnabled
-      eqBandSettings { q cutoff gain }
-      replaygainSettings { noclip type preamp }
-    }
-  }
-`;
-
-export async function getGlobalSettings(did: string): Promise<GlobalSettings> {
-  const data = await gql<{ globalSettings: GlobalSettings }>(did, GET_GLOBAL_SETTINGS);
-  return data.globalSettings;
-}
-
-export async function saveSettings(did: string, patch: SettingsPatch): Promise<void> {
-  // saveSettings takes a NewGlobalSettings input; only provided fields are applied.
-  await gql(did, `
-    mutation SaveSettings($settings: NewGlobalSettings!) {
-      saveSettings(settings: $settings)
-    }
-  `, { settings: patch });
-}
diff --git a/apps/web/src/pages/settings/audio/sections/Equalizer.tsx b/apps/web/src/pages/settings/audio/sections/Equalizer.tsx
index ddfda501..f6234ece 100644
--- a/apps/web/src/pages/settings/audio/sections/Equalizer.tsx
+++ b/apps/web/src/pages/settings/audio/sections/Equalizer.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { useMemo } from "react";
-import { EQ_BANDS, EQ_Q } from "../../../../atoms/equalizer";
+import { EQ_BANDS, EQ_BANDS_HZ, EQ_Q } from "../../../../atoms/equalizer";
 import { useAudioSettings } from "../../../../hooks/useAudioSettings";
 import {
   Card,
@@ -35,6 +35,9 @@ const GainText = styled.span`
   font-variant-numeric: tabular-nums;
 `;
 
+// Vertical EQ band fader — native range input styled to match the app's other
+// audio sliders. baseweb's Slider is horizontal-only, so it can't render a
+// vertical 10-band fader.
 const VertSlider = styled.input<{ disabled: boolean }>`
   appearance: slider-vertical;
   -webkit-appearance: slider-vertical;
@@ -61,7 +64,7 @@ const CurveBox = styled.div`
 `;
 
 function formatFreq(hz: number) {
-  return hz >= 1000 ? `${hz / 1000}kHz` : `${hz}Hz`;
+  return hz >= 1000 ? `${hz / 1000}kHz` : `${hz}`;
 }
 
 // Rockbox stores gain in tenths of dB (e.g. -135 = -13.5 dB), so keep one
@@ -175,7 +178,11 @@ function EqCurve({
 export function Equalizer() {
   const { data, actions } = useAudioSettings();
   const enabled = data?.eqEnabled ?? false;
-  const bands = data?.eqBandSettings ?? EQ_BANDS.map((b) => ({ ...b, q: EQ_Q * 10 }));
+  // Frequency is fixed by band index — ignore any stale persisted cutoff so the
+  // labels are always the canonical 32 Hz … 16 kHz set.
+  const bands = (
+    data?.eqBandSettings ?? EQ_BANDS.map((b) => ({ ...b, q: EQ_Q * 10 }))
+  ).map((b, i) => ({ ...b, cutoff: EQ_BANDS_HZ[i] ?? b.cutoff }));
   const currentPreset = detectPreset(bands);
 
   const setBand = (index: number, gainDb: number) => {
@@ -254,6 +261,7 @@ export function Equalizer() {
                 <GainText>{formatGain(gainDb)}</GainText>
                 <VertSlider
                   type="range"
+                  aria-label={`${formatFreq(band.cutoff)} gain`}
                   min={-24}
                   max={24}
                   step={0.5}
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 6b9d6dec..985ef44f 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,8 +1,31 @@
 import tailwindcss from "@tailwindcss/vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react-swc";
+import { cpSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig } from "vite";
 
+// rockbox-wasm's runtime (core + decoder worker + audio worklet) is fetched by
+// URL at runtime, so it can't go through the module graph. Mirror the package
+// dist into public/rockbox — served at /rockbox/*, which is the RockboxPlayer
+// baseUrl (see src/lib/audio/rockbox-engine.ts). Vite then copies public/ into
+// the build output, so the assets ship at dist/rockbox/* for production.
+//
+// Resolve via createRequire (works on every Node version + in CI) rather than
+// import.meta.resolve, whose sync form is only stable on Node 20.6+ — an older
+// CI Node would otherwise silently skip the copy and 404 the worklet in prod.
+const require = createRequire(import.meta.url);
+// Resolve the exported ./dist/* subpath (require can't resolve "." — the
+// package only exposes an `import` condition, not `require`).
+const rockboxDist = dirname(require.resolve("rockbox-wasm/dist/rockbox.js"));
+cpSync(
+  rockboxDist,
+  fileURLToPath(new URL("./public/rockbox", import.meta.url)),
+  { recursive: true },
+);
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
@@ -15,5 +38,9 @@ export default defineConfig({
   ],
   optimizeDeps: {
     force: true,
+    // Don't prebundle rockbox-wasm: it resolves its worker/worklet via
+    // `new URL("./file", import.meta.url)`, which esbuild's prebundle would
+    // rewrite incorrectly. Served as-is, the ESM facade loads them at runtime.
+    exclude: ["rockbox-wasm"],
   },
 });
diff --git a/bun.lock b/bun.lock
index 94e19ff5..6e4c769c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -186,7 +186,6 @@
         "date-fns": "^4.1.0",
         "dayjs": "^1.11.13",
         "effect": "^3.14.22",
-        "hls.js": "^1.6.16",
         "html-to-image": "^1.11.13",
         "i18next": "^24.2.2",
         "jotai": "^2.11.3",
@@ -203,6 +202,7 @@
         "react-i18next": "^15.4.0",
         "react-lazy-load-image-component": "^1.6.3",
         "recharts": "^2.15.1",
+        "rockbox-wasm": "^0.1.3",
         "styletron-engine-monolithic": "^1.0.0",
         "styletron-react": "^6.1.1",
         "swr": "^2.3.0",
@@ -253,7 +253,6 @@
         "@tabler/icons-react": "^3.31.0",
         "@tanstack/react-query": "^5.76.0",
         "@types/numeral": "^2.0.5",
-        "audio-decode": "^3.10.1",
         "axios": "^1.7.9",
         "baseui": "15.0.0",
         "consola": "^3.2.3",
@@ -270,6 +269,7 @@
         "react-hook-form": "^7.54.2",
         "react-router-dom": "^7.6.3",
         "recharts": "^2.15.1",
+        "rockbox-wasm": "^0.1.3",
         "styletron-engine-monolithic": "^1.0.0",
         "styletron-react": "^6.1.1",
         "tailwindcss": "^4.0.0",
@@ -375,30 +375,6 @@
 
     "@atproto/xrpc-server": ["@atproto/xrpc-server@0.7.19", "", { "dependencies": { "@atproto/common": "^0.4.11", "@atproto/crypto": "^0.4.4", "@atproto/lexicon": "^0.4.11", "@atproto/xrpc": "^0.7.0", "cbor-x": "^1.5.1", "express": "^4.17.2", "http-errors": "^2.0.0", "mime-types": "^2.1.35", "rate-limiter-flexible": "^2.4.1", "uint8arrays": "3.0.0", "ws": "^8.12.0", "zod": "^3.23.8" } }, "sha512-YSCl/tU2NDykgDYslFSOYCr96esUgDwncFiADKL59/fyIFPLoT0qY8Uq/budpxUh0qPzjow4HHgVWESOaOpUmA=="],
 
-    "@audio/decode-aac": ["@audio/decode-aac@1.1.3", "", {}, "sha512-emyA+pFa+o9N728t5HpcInT6FZZtaFtl68ex7UW7iBOTv6DrN4jxASj1D9KQO0S86cpu6t2u9hW9X/99Srfjog=="],
-
-    "@audio/decode-aiff": ["@audio/decode-aiff@1.1.1", "", {}, "sha512-Q4hH7tNtoTnVVwaT/XWUITfDeG9Y0KVRFkeWa1Ksl8FkUgutemVASiIoT7PvIchlhseq4haDdvQGu5cuLHdbNw=="],
-
-    "@audio/decode-amr": ["@audio/decode-amr@1.1.1", "", {}, "sha512-iIiY4YHaJ30isZVejhB/taO/jy7NVIveK/j6xPITqz/M/5JXC1tK5PMZ5PJ+Kni0LKGB+QN2BBonefKNkKr/VA=="],
-
-    "@audio/decode-caf": ["@audio/decode-caf@1.1.1", "", {}, "sha512-svwj9ZJ9k89T0O4t7Ca5G6AeCusJQOQo4gdJsDlCHw01E4XJm4ok3Oqu2vorgT7BoS1l1Sm2Ef4ib3cr1M9Gbw=="],
-
-    "@audio/decode-flac": ["@audio/decode-flac@1.1.0", "", { "dependencies": { "@wasm-audio-decoders/flac": "^0.2.10" } }, "sha512-d47Cxf91m1A7G0ketvWDmnn+qI9UaqEuZF0JpdVgGjjnfZQZ/3C8U3MM6nSsRaz4JZ904HtMkLUMF0yNEHXbJQ=="],
-
-    "@audio/decode-mp3": ["@audio/decode-mp3@1.1.0", "", { "dependencies": { "mpg123-decoder": "^1.0.3" } }, "sha512-eOBqdICwjQ0P9z6ei0wXmXVTW/tIiQ4YGsG3QMFJsdrGORhNQh6paQz53utIcVndmri9xfQStqerxMGt+82ygQ=="],
-
-    "@audio/decode-opus": ["@audio/decode-opus@1.0.0", "", { "dependencies": { "ogg-opus-decoder": "^1.7.3" } }, "sha512-IwoBu72t09g/T5QKiOSJ1bPBE0fGQkhGh0LwVFH7Uj1xgZ18hVywoA9dCIWxlpnPqz/ZFnAdY7qaKbeEPfGJ+g=="],
-
-    "@audio/decode-qoa": ["@audio/decode-qoa@1.0.0", "", { "dependencies": { "qoa-format": "^1.0.1" } }, "sha512-4O57YMprL+AZtxPVOgyDhUr2C+bVcp2cHrMKzBc4zo1ZJgITLZtfVA8TklTJEiLbvVfG2F0j44xHOTqCFhqvbA=="],
-
-    "@audio/decode-vorbis": ["@audio/decode-vorbis@1.0.0", "", { "dependencies": { "@wasm-audio-decoders/ogg-vorbis": "^0.1.20" } }, "sha512-8TR9V0GQuExgUMHOSYmBE/OreJ9D7YQH78ntPhCxxWM0IeV3qTE3To+cxZVSRg8bMXl6rB7GEGWMmJ8uLbkZlg=="],
-
-    "@audio/decode-wav": ["@audio/decode-wav@1.2.0", "", {}, "sha512-Q6VicCGHeoqCiLnTDAaZI3kHCZGd24km/BVLZMBF2vOSbknwnqUEkWs4RRtKUfMX+KBtwAgihkzF0Aw4Y3DkBw=="],
-
-    "@audio/decode-webm": ["@audio/decode-webm@1.2.1", "", { "dependencies": { "@wasm-audio-decoders/ogg-vorbis": "^0.1.20", "opus-decoder": "^0.7.6" } }, "sha512-UnlDUaPI7PF+I9neTF5LJ7NNrFgvi0zj8PsPcvkSf+NWW08UnbxgsN9WgtpY731R8MPMM10cZKGEoN0kqxT15Q=="],
-
-    "@audio/decode-wma": ["@audio/decode-wma@1.1.2", "", {}, "sha512-zjmvnuhjSx6i8C8xPLxoNwfLxBvTeo2zf8L0Z8LM1H3HlwyWZEEfAlIppNf794f/mhsnbRAnwCpwQ1HklMIJrg=="],
-
     "@aws-crypto/crc32": ["@aws-crypto/crc32@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg=="],
 
     "@aws-crypto/crc32c": ["@aws-crypto/crc32c@5.2.0", "", { "dependencies": { "@aws-crypto/util": "^5.2.0", "@aws-sdk/types": "^3.222.0", "tslib": "^2.6.2" } }, "sha512-+iWb8qaHLYKrNvGRbiYRHSdKRWhto5XlZUEBwDjYNf+ly5SVYG6zEoYIdxvf5R3zyeP16w4PLBn3rH1xc74Rag=="],
@@ -813,8 +789,6 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.10", "", { "os": "win32", "cpu": "x64" }, "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw=="],
 
-    "@eshaz/web-worker": ["@eshaz/web-worker@1.2.2", "", {}, "sha512-WxXiHFmD9u/owrzempiDlBB1ZYqiLnm9s6aPc8AlFQalq2tKmqdmMr9GXOupDgzXtqnBipj8Un0gkIm7Sjf8mw=="],
-
     "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.0", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g=="],
 
     "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.1", "", {}, "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="],
@@ -1393,6 +1367,8 @@
 
     "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
 
+    "@swc/helpers": ["@swc/helpers@0.5.23", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw=="],
+
     "@swc/types": ["@swc/types@0.1.25", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g=="],
 
     "@tabler/icons": ["@tabler/icons@3.36.0", "", {}, "sha512-z9OfTEG6QbaQWM9KBOxxUdpgvMUn0atageXyiaSc2gmYm51ORO8Ua7eUcjlks+Dc0YMK4rrodAFdK9SfjJ4ZcA=="],
@@ -1471,10 +1447,6 @@
 
     "@testing-library/user-event": ["@testing-library/user-event@14.5.2", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ=="],
 
-    "@thi.ng/bitstream": ["@thi.ng/bitstream@2.4.52", "", { "dependencies": { "@thi.ng/errors": "^2.6.14" } }, "sha512-uOOJ4QxJ8lK7juR2gGZHbISPsPGLp4w7PLFG7pTPG+t+8Hkanl3Syu3LMPq0DGJbAX7U5l1TrKvLoNeNta3OsA=="],
-
-    "@thi.ng/errors": ["@thi.ng/errors@2.6.14", "", {}, "sha512-dSqLPZh5wOe329Ks2pJqoDmtjSv2g4KpXEP5/IQ5J9qvrEyNrRBCuaKHUKYUltQ1OUHGd9L5hBqGJl65Hlnu+g=="],
-
     "@tokenizer/inflate": ["@tokenizer/inflate@0.4.1", "", { "dependencies": { "debug": "^4.4.3", "token-types": "^6.1.1" } }, "sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA=="],
 
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
@@ -1635,14 +1607,6 @@
 
     "@vitest/utils": ["@vitest/utils@2.1.8", "", { "dependencies": { "@vitest/pretty-format": "2.1.8", "loupe": "^3.1.2", "tinyrainbow": "^1.2.0" } }, "sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA=="],
 
-    "@wasm-audio-decoders/common": ["@wasm-audio-decoders/common@9.0.7", "", { "dependencies": { "@eshaz/web-worker": "1.2.2", "simple-yenc": "^1.0.4" } }, "sha512-WRaUuWSKV7pkttBygml/a6dIEpatq2nnZGFIoPTc5yPLkxL6Wk4YaslPM98OPQvWacvNZ+Py9xROGDtrFBDzag=="],
-
-    "@wasm-audio-decoders/flac": ["@wasm-audio-decoders/flac@0.2.10", "", { "dependencies": { "@wasm-audio-decoders/common": "9.0.7", "codec-parser": "2.5.0" } }, "sha512-YfcyoD2rYRBa6ffawZKNi5qvV5HArJmNmuMVUPoutuZ2hhGi6WNSWIzgvbROGmPbFivLL764Am7xxJENWJDhjw=="],
-
-    "@wasm-audio-decoders/ogg-vorbis": ["@wasm-audio-decoders/ogg-vorbis@0.1.20", "", { "dependencies": { "@wasm-audio-decoders/common": "9.0.7", "codec-parser": "2.5.0" } }, "sha512-zaQPasU5usRjUDXtXOHYED5tfkR4QMXd+EH3Nrz1+4+M5pCsdD+s9YxJqb0oqnTyRu/KUujOmu5Z/m/NT47vwg=="],
-
-    "@wasm-audio-decoders/opus-ml": ["@wasm-audio-decoders/opus-ml@0.0.2", "", { "dependencies": { "@wasm-audio-decoders/common": "9.0.7" } }, "sha512-58rWEqDGg+CKCyEeKm2KoxxSwTWtHh/NLTW9ObR4K8CGF6VwuuGudEI1CtniS/oSRmL1nJq/eh8MKARiluw4DQ=="],
-
     "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
 
     "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],
@@ -1699,10 +1663,6 @@
 
     "attr-accept": ["attr-accept@2.2.5", "", {}, "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ=="],
 
-    "audio-decode": ["audio-decode@3.10.1", "", { "dependencies": { "@audio/decode-aac": "^1.0.2", "@audio/decode-aiff": "^1.0.0", "@audio/decode-amr": "^1.0.0", "@audio/decode-caf": "^1.0.0", "@audio/decode-flac": "^1.1.0", "@audio/decode-mp3": "^1.1.0", "@audio/decode-opus": "^1.0.0", "@audio/decode-qoa": "^1.0.0", "@audio/decode-vorbis": "^1.0.0", "@audio/decode-wav": "^1.2.0", "@audio/decode-webm": "^1.0.0", "@audio/decode-wma": "^1.0.0", "audio-type": "^2.4.0" } }, "sha512-aIMSNFtZaZeSq1mYFXga7ZRglguLQq8WpQv1CDiLmqnkIrtrTYUO56XrxfkwGdQ/+Ek0VJ91TKGRdpARa1NJaQ=="],
-
-    "audio-type": ["audio-type@2.4.1", "", {}, "sha512-dK9Z/P83C/rBfTrXXgPD3jZ+aXxx2o/P4rq8+H1JqxbXklitEeJw4CrcwMC5CkON3CX3yy2gaWnIEVYejYh0zQ=="],
-
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
     "await-lock": ["await-lock@2.2.2", "", {}, "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw=="],
@@ -1811,8 +1771,6 @@
 
     "code-block-writer": ["code-block-writer@11.0.3", "", {}, "sha512-NiujjUFB4SwScJq2bwbYUtXbZhBSlY6vYzm++3Q6oC+U+injTqfPYFK8wS9COOmb2lueqp0ZRB4nK1VYeHgNyw=="],
 
-    "codec-parser": ["codec-parser@2.5.0", "", {}, "sha512-Ru9t80fV8B0ZiixQl8xhMTLru+dzuis/KQld32/x5T/+3LwZb0/YvQdSKytX9JqCnRdiupvAvyYJINKrXieziQ=="],
-
     "color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
@@ -2275,8 +2233,6 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
-    "hls.js": ["hls.js@1.6.16", "", {}, "sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA=="],
-
     "hoist-non-react-statics": ["hoist-non-react-statics@3.3.2", "", { "dependencies": { "react-is": "^16.7.0" } }, "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="],
 
     "hono": ["hono@4.9.11", "", {}, "sha512-MyJ4xop3boTyXl8bJBh4i20AAZTLM3AXUJphyrUb0CpgTKYb1N703z53XiKUKchGUpcPqiiYkiLOXA3kqK3icA=="],
@@ -2605,8 +2561,6 @@
 
     "moment": ["moment@2.30.1", "", {}, "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="],
 
-    "mpg123-decoder": ["mpg123-decoder@1.0.3", "", { "dependencies": { "@wasm-audio-decoders/common": "9.0.7" } }, "sha512-+fjxnWigodWJm3+4pndi+KUg9TBojgn31DPk85zEsim7C6s0X5Ztc/hQYdytXkwuGXH+aB0/aEkG40Emukv6oQ=="],
-
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -2665,8 +2619,6 @@
 
     "ofetch": ["ofetch@1.4.1", "", { "dependencies": { "destr": "^2.0.3", "node-fetch-native": "^1.6.4", "ufo": "^1.5.4" } }, "sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw=="],
 
-    "ogg-opus-decoder": ["ogg-opus-decoder@1.7.3", "", { "dependencies": { "@wasm-audio-decoders/common": "9.0.7", "@wasm-audio-decoders/opus-ml": "0.0.2", "codec-parser": "2.5.0", "opus-decoder": "0.7.11" } }, "sha512-w47tiZpkLgdkpa+34VzYD8mHUj8I9kfWVZa82mBbNwDvB1byfLXSSzW/HxA4fI3e9kVlICSpXGFwMLV1LPdjwg=="],
-
     "ohash": ["ohash@2.0.11", "", {}, "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="],
 
     "on-exit-leak-free": ["on-exit-leak-free@2.1.2", "", {}, "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA=="],
@@ -2681,8 +2633,6 @@
 
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
-    "opus-decoder": ["opus-decoder@0.7.11", "", { "dependencies": { "@wasm-audio-decoders/common": "9.0.7" } }, "sha512-+e+Jz3vGQLxRTBHs8YJQPRPc1Tr+/aC6coV/DlZylriA29BdHQAYXhvNRKtjftof17OFng0+P4wsFIqQu3a48A=="],
-
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
 
     "p-finally": ["p-finally@1.0.0", "", {}, "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow=="],
@@ -2817,8 +2767,6 @@
 
     "pure-rand": ["pure-rand@6.1.0", "", {}, "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA=="],
 
-    "qoa-format": ["qoa-format@1.0.1", "", { "dependencies": { "@thi.ng/bitstream": "^2.2.12" } }, "sha512-dMB0Z6XQjdpz/Cw4Rf6RiBpQvUSPCfYlQMWvmuWlWkAT7nDQD29cVZ1SwDUB6DYJSitHENwbt90lqfI+7bvMcw=="],
-
     "qs": ["qs@6.14.0", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w=="],
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -2951,6 +2899,8 @@
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
 
+    "rockbox-wasm": ["rockbox-wasm@0.1.3", "", {}, "sha512-+bgocY2k3fEAnADo1W/Sw3YP8D8854Tq/HG1orKsxVuIpdeO3oeXy3RZLlGX3NsqKOnpZjiJZQnBS9LVFZjySQ=="],
+
     "rollup": ["rollup@4.52.4", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.52.4", "@rollup/rollup-android-arm64": "4.52.4", "@rollup/rollup-darwin-arm64": "4.52.4", "@rollup/rollup-darwin-x64": "4.52.4", "@rollup/rollup-freebsd-arm64": "4.52.4", "@rollup/rollup-freebsd-x64": "4.52.4", "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", "@rollup/rollup-linux-arm-musleabihf": "4.52.4", "@rollup/rollup-linux-arm64-gnu": "4.52.4", "@rollup/rollup-linux-arm64-musl": "4.52.4", "@rollup/rollup-linux-loong64-gnu": "4.52.4", "@rollup/rollup-linux-ppc64-gnu": "4.52.4", "@rollup/rollup-linux-riscv64-gnu": "4.52.4", "@rollup/rollup-linux-riscv64-musl": "4.52.4", "@rollup/rollup-linux-s390x-gnu": "4.52.4", "@rollup/rollup-linux-x64-gnu": "4.52.4", "@rollup/rollup-linux-x64-musl": "4.52.4", "@rollup/rollup-openharmony-arm64": "4.52.4", "@rollup/rollup-win32-arm64-msvc": "4.52.4", "@rollup/rollup-win32-ia32-msvc": "4.52.4", "@rollup/rollup-win32-x64-gnu": "4.52.4", "@rollup/rollup-win32-x64-msvc": "4.52.4", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ=="],
 
     "rollup-plugin-inject": ["rollup-plugin-inject@3.0.2", "", { "dependencies": { "estree-walker": "^0.6.1", "magic-string": "^0.25.3", "rollup-pluginutils": "^2.8.1" } }, "sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w=="],
@@ -3033,8 +2983,6 @@
 
     "simple-swizzle": ["simple-swizzle@0.2.4", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw=="],
 
-    "simple-yenc": ["simple-yenc@1.0.4", "", {}, "sha512-5gvxpSd79e9a3V4QDYUqnqxeD4HGlhCakVpb6gMnDD7lexJggSBJRBO5h52y/iJrdXRilX9UCuDaIJhSWm5OWw=="],
-
     "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
 
     "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
@@ -3763,8 +3711,6 @@
 
     "@rocksky/web-mobile/@types/ramda": ["@types/ramda@0.29.12", "", { "dependencies": { "types-ramda": "^0.29.10" } }, "sha512-sgIEjpJhdQPB52gDF4aphs9nl0xe54CR22DPdWqT8gQHjZYmVApgA0R3/CpMbl0Y8az2TEZrPNL2zy0EvjbkLA=="],
 
-    "@rocksky/web-mobile/axios": ["axios@1.12.2", "", { "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw=="],
-
     "@rocksky/web-mobile/ramda": ["ramda@0.29.1", "", {}, "sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA=="],
 
     "@rocksky/web-mobile/typescript": ["typescript@5.6.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw=="],
@@ -4447,12 +4393,6 @@
 
     "@rocksky/web-mobile/@types/ramda/types-ramda": ["types-ramda@0.29.10", "", { "dependencies": { "ts-toolbelt": "^9.6.0" } }, "sha512-5PJiW/eiTPyXXBYGZOYGezMl6qj7keBiZheRwfjJZY26QPHsNrjfJnz0mru6oeqqoTHOni893Jfd6zyUXfQRWg=="],
 
-    "@rocksky/web-mobile/axios/follow-redirects": ["follow-redirects@1.15.11", "", {}, "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="],
-
-    "@rocksky/web-mobile/axios/form-data": ["form-data@4.0.4", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "hasown": "^2.0.2", "mime-types": "^2.1.12" } }, "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow=="],
-
-    "@rocksky/web-mobile/axios/proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
-
     "@rocksky/web-mobile/vitest/@vitest/expect": ["@vitest/expect@3.0.9", "", { "dependencies": { "@vitest/spy": "3.0.9", "@vitest/utils": "3.0.9", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-5eCqRItYgIML7NNVgJj6TVCmdzE7ZVgJhruW0ziSQV4V7PvLkDL1bBkBdcTs/VuIz0IxPb5da1IDSqc1TR9eig=="],
 
     "@rocksky/web-mobile/vitest/@vitest/mocker": ["@vitest/mocker@3.0.9", "", { "dependencies": { "@vitest/spy": "3.0.9", "estree-walker": "^3.0.3", "magic-string": "^0.30.17" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0 || ^6.0.0" }, "optionalPeers": ["msw", "vite"] }, "sha512-ryERPIBOnvevAkTq+L1lD+DTFBRcjueL9lOUfXsLfwP92h4e+Heb+PjiqS3/OURWPtywfafK0kj++yDFjWUmrA=="],
-- 
2.51.2