diff --git a/specs/components/engine/audio/SPEC.md b/specs/components/engine/audio/SPEC.md
index f62937f6..c05aed08 100644
--- a/specs/components/engine/audio/SPEC.md
+++ b/specs/components/engine/audio/SPEC.md
@@ -11,6 +11,7 @@ This component is responsible for playing audio in the browser or web view. This
 - Broadcasting the audio element allows other browser tabs to monitor its playback progress and state, volume, etc.
 - When the broadcast leader tab gets closed, another tab will take the leader role and when that happens; if the audio was playing, the audio must start playing in the tab of the new leader.
 - Consumers of this custom element must be able to tap into the code that allows for audio visualisations. Though it is not required to work simultaneously on all browser tabs.
+- Audio is routed through the Web Audio API (`createMediaElementSource`) so consumers can insert their own processing (equalizer filters, analyzers for visualizations, etc) via the exposed `webAudio` graph.
 - The volume of the audio must be able to be set and persisted across sessions. This value depends on the used `group`.
 - The mime type must be set on the audio if provided.
 - The element must support a `initial-progress` attribute which can be used to start playing audio from that particular point.
@@ -19,3 +20,19 @@ This component is responsible for playing audio in the browser or web view. This
 ## Implementation specific
 
 - When using a HTML audio element, use a silent audio file data-uri as the `src` to cancel the loading of any data.
+
+### Web Audio graph
+
+Every `<audio>` element is routed through a single shared `AudioContext` using `createMediaElementSource`. All sources land on a single post-volume `input` (a `GainNode`), which is connected straight to the destination by default:
+
+```
+source → input → destination
+```
+
+The exposed `webAudio` graph gives consumers (`context`, `input`, `destination`) a stable place to insert their own processing:
+
+- `input` is the post-volume tap point that every `<audio>` element feeds into. `input.gain` carries the master volume, so `HTMLMediaElement.volume` is kept at unity for routed elements.
+- To apply DSP, a consumer disconnects the default `input → destination` edge and reconnects it through its own chain, ending at the destination — e.g. `input → biquadFilter → analyser → destination` for an equalizer/visualizer.
+- `destination` is `context.destination`, the standard output used to complete any inserted chain.
+- The `AudioContext` starts in the browser-suspended state; the engine unlocks it on the first user gesture and resumes it on `play()`.
+- The context is created lazily (the first time an element is routed or `webAudio` is accessed) and closed when the engine is disconnected.
diff --git a/specs/components/engine/audio/types.d.ts b/specs/components/engine/audio/types.d.ts
index 65a4fb41..9dbfdb2d 100644
--- a/specs/components/engine/audio/types.d.ts
+++ b/specs/components/engine/audio/types.d.ts
@@ -69,6 +69,23 @@ export type AudioStateReadOnly = {
   progress: SignalReader<number>;
 };
 
+/**
+ * The shared Web Audio graph that every <audio> element is routed through.
+ *
+ *   source → input → destination
+ *
+ * `input` is the post-volume tap point that all `<audio>` sources feed into;
+ * it's connected straight to `destination` by default. A consumer applies
+ * processing (an equalizer, an analyser for visualizations, …) by disconnecting
+ * the `input`→`destination` edge and reconnecting it through its own chain.
+ */
+export type WebAudioGraph = {
+  context: AudioContext;
+  /** Post-volume tap point that every <audio> element feeds into (`gain` = master volume). */
+  input: GainNode;
+  destination: AudioDestinationNode;
+};
+
 export type LoadingState =
   | "initialisation"
   | "loading"
diff --git a/src/components/engine/audio/element.js b/src/components/engine/audio/element.js
index 0d37a07a..1057caf2 100644
--- a/src/components/engine/audio/element.js
+++ b/src/components/engine/audio/element.js
@@ -25,6 +25,17 @@ import { computed, signal, untracked } from "~/common/signal.js";
 const IS_IOS = /iPhone|iPad|iPod/.test(navigator.userAgent) ||
   (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
 
+/**
+ * Module-internal Web Audio routing hooks. Accessed only by {@link AudioEngine}
+ * and {@link AudioEngineItem} (both live in this file), so these stay out of
+ * the public surface — external consumers use `engine.webAudio` instead.
+ *
+ * @type {unique symbol}
+ */
+const ROUTE_AUDIO = Symbol("routeAudio");
+/** @type {unique symbol} */
+const UNROUTE_AUDIO = Symbol("unrouteAudio");
+
 ////////////////////////////////////////////
 // ELEMENT
 ////////////////////////////////////////////
@@ -50,6 +61,24 @@ class AudioEngine extends BroadcastableDiffuseElement {
   /** Aborts in-flight MediaSource setup when the element is disconnected. */
   #streamAbort = new AbortController();
 
+  // WEB AUDIO
+  //
+  // Every <audio> element is routed through a shared AudioContext so consumers
+  // (themes, equalizer / visualizer plugins, …) can tap into the signal. All
+  // sources land on a single post-volume `input` node that is connected to the
+  // destination by default; a consumer replaces that edge with its own chain
+  // (e.g. `input → biquadFilter → destination`) to apply DSP.
+  //
+  // Chain (unless a consumer splices its nodes in):
+  //   mediaElementSource -> input -> destination
+
+  /** @type {AudioContext | undefined} Lazily created, shared by all items. */
+  #audioContext = undefined;
+  /** @type {GainNode | undefined} Post-volume tap point that all sources feed. */
+  #input = undefined;
+  /** @type {Map<HTMLAudioElement, MediaElementAudioSourceNode>} */
+  #sourceNodes = new Map();
+
   // SIGNALS
 
   #items = signal(/** @type {AudioUrl[]} */ ([]));
@@ -125,12 +154,21 @@ class AudioEngine extends BroadcastableDiffuseElement {
 
     // Monitor volume signal
     this.effect(() => {
+      // Master volume is applied through the Web Audio graph's input gain node.
+      // When the graph hasn't been created yet (e.g. no AudioContext support) we
+      // fall back to setting the volume directly on each element.
+      if (this.#input) {
+        this.#input.gain.value = this.#volume.value;
+      }
+
       Array.from(this.querySelectorAll("de-audio-item")).forEach(
         (node) => {
           const item = /** @type {AudioEngineItem} */ (node);
           if (item.hasAttribute("preload")) return;
           const audio = item.querySelector("audio");
-          if (audio) audio.volume = this.#volume.value;
+          if (audio && !this.#sourceNodes.has(audio)) {
+            audio.volume = this.#volume.value;
+          }
         },
       );
 
@@ -250,6 +288,9 @@ class AudioEngine extends BroadcastableDiffuseElement {
       audio.load();
     });
 
+    // Detach the <audio> source nodes and close the shared AudioContext.
+    this.#teardownWebAudio();
+
     super.disconnectedCallback();
   }
 
@@ -290,8 +331,14 @@ class AudioEngine extends BroadcastableDiffuseElement {
    * @type {Actions["play"]}
    */
   play({ audioId, volume }) {
+    this.#resumeContext();
+
     this.#withAudioNode(audioId, (audio, item) => {
-      audio.volume = volume ?? this.volume();
+      // Routed elements get master volume from the graph's gain node, so keep
+      // their own volume at unity unless a per-item override is given. In the
+      // no-Web-Audio fallback the element's volume carries the master level.
+      const routed = this.#sourceNodes.has(audio);
+      audio.volume = volume ?? (routed ? 1 : this.volume());
       audio.muted = false;
 
       // TODO: Might need this for `data-initial-progress`
@@ -684,6 +731,11 @@ class AudioEngine extends BroadcastableDiffuseElement {
       const audio = element.querySelector("audio");
       if (!audio) return;
 
+      // Unhook it from the Web Audio graph (a `createMediaElementSource` node
+      // can only be made once per element, and the element is about to be
+      // dropped, so the source node must be released).
+      this[UNROUTE_AUDIO](audio);
+
       audio.pause();
       audio.removeAttribute("src");
       audio.querySelectorAll("source").forEach((s) => s.removeAttribute("src"));
@@ -783,6 +835,151 @@ class AudioEngine extends BroadcastableDiffuseElement {
     const item = this.#itemElement(audioId);
     if (item) fn(item.audio, item);
   }
+
+  // WEB AUDIO
+
+  /**
+   * The shared Web Audio graph, exposed so consumers (equalizer / visualizer
+   * plugins, themes, …) can hook into the audio signal.
+   *
+   * Every <audio> element is routed into the `input` node (with master volume
+   * already applied). By default `input` is connected straight to the
+   * destination:
+   *
+   *   source -> input -> destination
+   *
+   * To insert processing, disconnect that pass-through edge and reconnect it
+   * through your own chain, ending at the destination. For example, wiring in
+   * a biquad filter chain and an analyser:
+   *
+   * ```ignore
+   * const { context, input, destination } = engine.webAudio;
+   * const eq = context.createBiquadFilter();
+   * const analyser = context.createAnalyser();
+   * input.disconnect(destination);  // remove the default pass-through
+   * input.connect(eq);              // re-route through your chain
+   * eq.connect(analyser);
+   * analyser.connect(destination);
+   * ```
+   *
+   * Use `context.resume()` to unlock the context on a user gesture (browsers
+   * start it suspended until interaction).
+   */
+  get webAudio() {
+    this.#ensureAudioGraph();
+
+    return {
+      context: /** @type {AudioContext} */ (this.#audioContext),
+      input: /** @type {GainNode} */ (this.#input),
+      destination: /** @type {AudioContext} */ (this.#audioContext).destination,
+    };
+  }
+
+  /** Lazily creates the shared AudioContext and the default (pass-through) graph. */
+  #ensureAudioGraph() {
+    if (this.#audioContext) return;
+
+    /** @type {typeof AudioContext | undefined} */
+    const Ctx = globalThis.AudioContext ?? /** @type {any} */ (globalThis)
+        .webkitAudioContext;
+    if (!Ctx) return;
+
+    const context = new Ctx();
+    const input = context.createGain();
+
+    // Pass-through; consumers disconnect this edge to insert their chain.
+    input.connect(context.destination);
+
+    this.#audioContext = context;
+    this.#input = input;
+
+    // Apply the (possibly persisted) master volume to the freshly created node.
+    input.gain.value = this.#volume.value;
+
+    // Unlock the context on the first user gesture so playback that was
+    // requested before any interaction (e.g. autoplay) can proceed.
+    if (context.state === "suspended") {
+      const unlock = () => {
+        context.resume().catch(() => {});
+        ["touchstart", "touchend", "mousedown", "keydown"].forEach((e) => {
+          document.body.removeEventListener(e, unlock);
+        });
+      };
+      ["touchstart", "touchend", "mousedown", "keydown"].forEach((e) => {
+        document.body.addEventListener(e, unlock);
+      });
+    }
+  }
+
+  /**
+   * Routes an <audio> element through the Web Audio graph. Safe to call more
+   * than once per element (eg. when a single node is reused on iOS).
+   *
+   * Module-internal; use `webAudio` to consume the graph.
+   *
+   * @param {HTMLAudioElement} audio
+   */
+  [ROUTE_AUDIO](audio) {
+    if (this.#sourceNodes.has(audio)) return;
+
+    this.#ensureAudioGraph();
+    if (!this.#audioContext || !this.#input) return;
+
+    let source;
+    try {
+      source = this.#audioContext.createMediaElementSource(audio);
+    } catch {
+      // A `createMediaElementSource` node can only be created once per element.
+      // Treat a reused element we don't hold a node for (e.g. after the engine
+      // was torn down and reconnected) as already routed and skip it — the
+      // element simply won't be part of the graph in that case.
+      this.#sourceNodes.set(audio, /** @type {any} */ (null));
+      return;
+    }
+    source.connect(this.#input);
+    this.#sourceNodes.set(audio, source);
+
+    // Volume is handled by the graph's input gain node; keep the element's own
+    // volume at unity so the two don't compound.
+    audio.volume = 1;
+  }
+
+  /**
+   * Removes an <audio> element's source node from the graph. Mostly useful
+   * when the element is dropped (no longer in `this.items()`).
+   *
+   * Module-internal; use `webAudio` to consume the graph.
+   *
+   * @param {HTMLAudioElement} audio
+   */
+  [UNROUTE_AUDIO](audio) {
+    const source = this.#sourceNodes.get(audio);
+    if (!source) return;
+
+    source.disconnect();
+    this.#sourceNodes.delete(audio);
+  }
+
+  /** Resumes the shared AudioContext if it is suspended (e.g. autoplay policy). */
+  #resumeContext() {
+    this.#audioContext?.resume().catch(() => {});
+  }
+
+  /** Tears down the graph and all per-element source nodes. */
+  #teardownWebAudio() {
+    for (const audio of this.#sourceNodes.keys()) {
+      this[UNROUTE_AUDIO](audio);
+    }
+
+    this.#sourceNodes.clear();
+
+    // Detach from the destination, then close the context to free resources.
+    if (this.#input) this.#input.disconnect();
+    this.#audioContext?.close().catch(() => {});
+
+    this.#audioContext = undefined;
+    this.#input = undefined;
+  }
 }
 
 export default AudioEngine;
@@ -940,6 +1137,28 @@ class AudioEngineItem extends BroadcastableDiffuseElement {
 
     // Super
     super.connectedCallback();
+
+    // Route this item's <audio> through the engine's shared Web Audio graph
+    // so volume flows through the gain node and consumers (equalizer,
+    // visualizer plugins, etc) can tap into the signal. Idempotent per element.
+    this.engine?.[ROUTE_AUDIO](this.audio);
+  }
+
+  /**
+   * @override
+   */
+  disconnectedCallback() {
+    // Unhook the source node so the engine can tear the graph down cleanly
+    // once the item is dropped. The engine also handles this in its render
+    // cleanup, so this is just a safety net.
+    let audio;
+    try {
+      audio = this.audio;
+    } catch {
+      return;
+    }
+    this.engine?.[UNROUTE_AUDIO](audio);
+    super.disconnectedCallback();
   }
 
   // STATE
diff --git a/src/facets/themes/winamp/winamp/element.js b/src/facets/themes/winamp/winamp/element.js
index a2fc837c..cfe9cc05 100644
--- a/src/facets/themes/winamp/winamp/element.js
+++ b/src/facets/themes/winamp/winamp/element.js
@@ -242,8 +242,6 @@ class WinampElement extends DiffuseElement {
   #eqNodes = [];
   /** @type {AnalyserNode | null} */
   #analyser = null;
-  /** @type {Map<string, MediaElementAudioSourceNode>} */
-  #srcNodes = new Map();
   /** @type {number | undefined} */
   #visRAF = undefined;
   /** @type {ReturnType<typeof setInterval> | undefined} */
@@ -445,10 +443,13 @@ class WinampElement extends DiffuseElement {
       });
 
       this.effect(() => {
-        const audioId = this.$controller.value?.$queue.value?.now()?.id;
+        const engine = this.#audioEngine();
         const playing = this.isPlaying();
         untracked(() => {
-          if (audioId) this.#connectToAnalyser(audioId);
+          // The engine already routes every <audio> through its Web Audio
+          // graph; we just need to splice our EQ/analyser chain into that
+          // post-volume tap point (a no-op once wired).
+          if (engine) this.#ensureAnalyser();
           if (playing) {
             this.#ensureAnalyser();
             this.#audioCtx?.resume();
@@ -563,10 +564,15 @@ class WinampElement extends DiffuseElement {
     }
 
     this.effect(() => {
+      const engineReady = !!this.#audioEngine();
       if (!this.#milkdropOpen.value) {
         untracked(() => this.#stopButterchurn());
         return;
       }
+      // Wait for the audio engine: `#ensureAnalyser` can only splice into the
+      // graph once the engine exists, so defer until it's ready (the effect
+      // re-runs because `#audioEngine()` reads the controller/audio signals).
+      if (!engineReady) return;
       untracked(() => {
         requestAnimationFrame(() => {
           const canvas = this.root().querySelector("#milkdrop-canvas");
@@ -725,6 +731,18 @@ class WinampElement extends DiffuseElement {
       this.#visRAF = undefined;
     }
     this.#stopButterchurn();
+
+    // Un-splice our eq/analyser chain from the engine's Web Audio tap point so
+    // a later reconnect doesn't double-wire into the same graph.
+    if (this.#preampNode) this.#preampNode.disconnect();
+    if (this.#analyser) this.#analyser.disconnect();
+
+    // Drop cached nodes so a subsequent connect re-splices into the engine's
+    // (possibly re-created) Web Audio graph from scratch.
+    this.#audioCtx = null;
+    this.#preampNode = null;
+    this.#eqNodes = [];
+    this.#analyser = null;
   }
 
   // WINDOW SNAPPING — ported from webamp/js/snapUtils.ts
@@ -1110,48 +1128,52 @@ class WinampElement extends DiffuseElement {
     "rgb(49,156,8)", // 15 — dim green (quiet)
   ];
 
+  /** The audio engine, from which we consume the shared Web Audio graph. */
+  #audioEngine() {
+    return this.$controller.value?.$audio.value ?? null;
+  }
+
   #ensureAnalyser() {
     if (this.#analyser) return;
-    this.#audioCtx = new AudioContext();
 
-    this.#preampNode = this.#audioCtx.createGain();
+    // The engine owns the AudioContext and routes every <audio> through it. We
+    // splice our EQ/analyser chain into the post-volume tap point, replacing
+    // the default pass-through: input → preamp → eq[0..9] → analyser → destination.
+    //
+    // The analyser is inline (it feeds the destination) so we can also read its
+    // data for the visualiser / butterchurn.
+    const engine = this.#audioEngine();
+    if (!engine) return;
+
+    const { context, input, destination } = engine.webAudio;
+    this.#audioCtx = context;
+
+    this.#preampNode = context.createGain();
     this.#eqNodes = EQ_BANDS.map((freq) => {
-      const f = /** @type {AudioContext} */ (this.#audioCtx)
-        .createBiquadFilter();
+      const f = context.createBiquadFilter();
       f.type = "peaking";
       f.frequency.value = freq;
       f.Q.value = 1.0;
       f.gain.value = 0;
       return f;
     });
-    this.#analyser = this.#audioCtx.createAnalyser();
+    this.#analyser = context.createAnalyser();
     this.#analyser.fftSize = 1024;
     this.#analyser.smoothingTimeConstant = 0;
 
-    // Chain: source → preamp → eq[0..9] → analyser → destination
+    // Chain: input → preamp → eq[0..9] → analyser → destination
+    input.disconnect(destination);
+    input.connect(this.#preampNode);
     this.#preampNode.connect(this.#eqNodes[0]);
     for (let i = 0; i < this.#eqNodes.length - 1; i++) {
       this.#eqNodes[i].connect(this.#eqNodes[i + 1]);
     }
     this.#eqNodes[this.#eqNodes.length - 1].connect(this.#analyser);
-    this.#analyser.connect(this.#audioCtx.destination);
+    this.#analyser.connect(destination);
 
     this.#applyEq();
   }
 
-  /** @param {string} audioId */
-  #connectToAnalyser(audioId) {
-    if (this.#srcNodes.has(audioId)) return;
-    const audioEl = this.$controller.value?.$audio.value
-      ?.querySelector(`de-audio-item[id="${audioId}"]:not([preload]) audio`);
-    if (!(audioEl instanceof HTMLAudioElement)) return;
-    this.#ensureAnalyser();
-    const src = /** @type {AudioContext} */ (this.#audioCtx)
-      .createMediaElementSource(audioEl);
-    src.connect(/** @type {GainNode} */ (this.#preampNode));
-    this.#srcNodes.set(audioId, src);
-  }
-
   #startVisualizer() {
     if (this.#visRAF !== undefined) return;
     const canvas = this.root().querySelector("#visualizer");
@@ -1241,9 +1263,9 @@ class WinampElement extends DiffuseElement {
       const HEIGHT_SCALE = MAX_HEIGHT / FULL_HEIGHT;
       const PUSH_DOWN = H >= 16 ? 2 : 0;
 
-      // Lazy-connect current audio
-      const audioId = this.$controller.value?.$queue.value?.now()?.id;
-      if (audioId) this.#connectToAnalyser(audioId);
+      // The engine routes each <audio> through the graph automatically;
+      // make sure our EQ/analyser chain is spliced into that bus.
+      this.#ensureAnalyser();
 
       // Time-domain → FFT → spectral data
       analyser.getByteTimeDomainData(timeDomainBuf);