spatial audio

Author: GavinCoded

src/ctx/settings_ctx.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, useEffect, type ReactNode } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { message } from "@tauri-apps/plugin-dialog";
-import { set_eq_all, set_pitch as audio_set_pitch, set_crossfade as audio_set_cf, EQ_FREQS } from "@/lib";
+import { set_eq_all, set_pitch as audio_set_pitch, set_crossfade as audio_set_cf, set_spatial as audio_set_spatial, EQ_FREQS } from "@/lib";
 
 export type EqPreset = { name: string; gains: number[] };
 
@@ -82,6 +82,8 @@ type SettingsState = {
   set_amll_word_sync: (v: boolean) => void;
   crossfade: number;
   set_crossfade: (v: number) => void;
+  spatial_audio: boolean;
+  set_spatial_audio: (v: boolean) => void;
   custom_presets: EqPreset[];
   save_preset: (name: string, gains: number[]) => void;
   delete_preset: (name: string) => void;
@@ -121,6 +123,7 @@ export function SettingsProv({ children }: { children: ReactNode }) {
     const s = localStorage.getItem("crossfade");
     return s ? Math.max(0, Math.min(12, parseFloat(s) || 0)) : 0;
   });
+  const [spatial_audio, _set_spatial] = useState(() => localStorage.getItem("spatial_audio") === "1");
   const [custom_presets, _set_custom_presets] = useState<EqPreset[]>(load_custom_presets);
 
   useEffect(() => {
@@ -140,6 +143,10 @@ export function SettingsProv({ children }: { children: ReactNode }) {
     audio_set_cf(crossfade);
   }, [crossfade]);
 
+  useEffect(() => {
+    audio_set_spatial(spatial_audio);
+  }, [spatial_audio]);
+
   useEffect(() => {
     if (!tray_enabled) {
       invoke("tray_set", { enabled: false }).catch(e => console.error("tray_set off:", e));
@@ -167,6 +174,7 @@ export function SettingsProv({ children }: { children: ReactNode }) {
   const set_exp_volume = (v: boolean) => persist_bool("exp_volume", v, _set_exp_vol);
   const set_amll_lyrics = (v: boolean) => persist_bool("amll_lyrics", v, _set_amll);
   const set_amll_word_sync = (v: boolean) => persist_bool("amll_word_sync", v, _set_amll_ws);
+  const set_spatial_audio = (v: boolean) => persist_bool("spatial_audio", v, _set_spatial);
 
   function set_eq_bands(gains: number[]) {
     localStorage.setItem("eq_bands", JSON.stringify(gains));
@@ -243,7 +251,7 @@ export function SettingsProv({ children }: { children: ReactNode }) {
   }
 
   return (
-    <Ctx.Provider value={{ immersive_bg, set_immersive_bg, eq_bands, set_eq_bands, eq_enabled, set_eq_enabled, discord_rpc, set_discord_rpc, rpc_opts, set_rpc_opts, tray_enabled, set_tray_enabled, sp_client_id, set_sp_client_id, sp_tokens, sp_token, sp_connect, sp_disconnect, sp_loading, pitch, set_pitch, exp_volume, set_exp_volume, amll_lyrics, set_amll_lyrics, amll_word_sync, set_amll_word_sync, crossfade, set_crossfade, custom_presets, save_preset, delete_preset }}>
+    <Ctx.Provider value={{ immersive_bg, set_immersive_bg, eq_bands, set_eq_bands, eq_enabled, set_eq_enabled, discord_rpc, set_discord_rpc, rpc_opts, set_rpc_opts, tray_enabled, set_tray_enabled, sp_client_id, set_sp_client_id, sp_tokens, sp_token, sp_connect, sp_disconnect, sp_loading, pitch, set_pitch, exp_volume, set_exp_volume, amll_lyrics, set_amll_lyrics, amll_word_sync, set_amll_word_sync, crossfade, set_crossfade, spatial_audio, set_spatial_audio, custom_presets, save_preset, delete_preset }}>
       {children}
     </Ctx.Provider>
   );

src/lib/audio.ts

@@ -1,4 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
+import { create_spatial, get_spatial_nodes, is_spatial_enabled, set_spatial_enabled } from "./spatial";
 
 type AudioCb = {
   on_time?: (t: number) => void;
@@ -50,7 +51,16 @@ function wire_deck(el: HTMLAudioElement): Deck {
   let node: AudioNode = src;
   for (const f of filters) { node.connect(f); node = f; }
   node.connect(gain);
-  gain.connect(ctx.destination);
+
+  if (is_spatial_enabled()) {
+    let spatial = get_spatial_nodes();
+    if (!spatial) spatial = create_spatial(ctx);
+    gain.connect(spatial.input);
+    spatial.output.connect(ctx.destination);
+  } else {
+    gain.connect(ctx.destination);
+  }
+
   return { el, gain, filters };
 }
 
@@ -251,3 +261,25 @@ export function set_pitch(rate: number) {
   if (_a) { _a.el.playbackRate = clamped; _a.el.preservesPitch = false; }
   if (_b) { _b.el.playbackRate = clamped; _b.el.preservesPitch = false; }
 }
+
+export function set_spatial(on: boolean) {
+  set_spatial_enabled(on);
+  const ctx = get_ctx();
+
+  function rewire(deck: Deck | null) {
+    if (!deck?.gain) return;
+    deck.gain.disconnect();
+    if (on) {
+      let spatial = get_spatial_nodes();
+      if (!spatial) spatial = create_spatial(ctx);
+      spatial.output.disconnect();
+      deck.gain.connect(spatial.input);
+      spatial.output.connect(ctx.destination);
+    } else {
+      deck.gain.connect(ctx.destination);
+    }
+  }
+
+  rewire(_a);
+  rewire(_b);
+}

src/lib/index.ts

@@ -1,4 +1,4 @@
-export { play_src, play_resume, play_pause, play_seek, get_vol, set_vol, get_playing, get_time, get_latency, set_cbs, set_eq_band, set_eq_all, get_pitch, set_pitch, is_live, EQ_FREQS, set_crossfade, get_crossfade } from "./audio";
+export { play_src, play_resume, play_pause, play_seek, get_vol, set_vol, get_playing, get_time, get_latency, set_cbs, set_eq_band, set_eq_all, get_pitch, set_pitch, is_live, EQ_FREQS, set_crossfade, get_crossfade, set_spatial } from "./audio";
 export { make_albums, make_artists } from "./parse";
 export { format_duration, format_count } from "./fmt";
 export { use_cover } from "./cover";

src/lib/spatial.ts

@@ -0,0 +1,110 @@
+type SpatialNodes = {
+  input: GainNode;
+  output: GainNode;
+  splitter: ChannelSplitterNode;
+  merger: ChannelMergerNode;
+  delay_l: DelayNode;
+  delay_r: DelayNode;
+  cross_l: GainNode;
+  cross_r: GainNode;
+  direct_l: GainNode;
+  direct_r: GainNode;
+  convolver: ConvolverNode;
+  wet: GainNode;
+  dry: GainNode;
+};
+
+let _nodes: SpatialNodes | null = null;
+let _enabled = false;
+
+function gen_impulse(ctx: AudioContext): AudioBuffer {
+  const rate = ctx.sampleRate;
+  const len = Math.round(rate * 0.35);
+  const buf = ctx.createBuffer(2, len, rate);
+  const l = buf.getChannelData(0);
+  const r = buf.getChannelData(1);
+
+  for (let i = 0; i < len; i++) {
+    const t = i / rate;
+    const decay = Math.exp(-6 * t);
+    const early = i < rate * 0.02 ? 0.6 : 1;
+
+    l[i] = (Math.random() * 2 - 1) * decay * early * 0.15;
+    r[i] = (Math.random() * 2 - 1) * decay * early * 0.15;
+
+    if (i === Math.round(rate * 0.008)) { l[i] += 0.12; r[i] += 0.08; }
+    if (i === Math.round(rate * 0.013)) { l[i] += 0.06; r[i] += 0.10; }
+    if (i === Math.round(rate * 0.019)) { l[i] += 0.08; r[i] += 0.05; }
+  }
+
+  return buf;
+}
+
+export function create_spatial(ctx: AudioContext): SpatialNodes {
+  const input = ctx.createGain();
+  const output = ctx.createGain();
+
+  const splitter = ctx.createChannelSplitter(2);
+  const merger = ctx.createChannelMerger(2);
+
+  const delay_l = ctx.createDelay(0.01);
+  const delay_r = ctx.createDelay(0.01);
+  delay_l.delayTime.value = 0.00022;
+  delay_r.delayTime.value = 0.00038;
+
+  const cross_l = ctx.createGain();
+  const cross_r = ctx.createGain();
+  cross_l.gain.value = -0.15;
+  cross_r.gain.value = -0.15;
+
+  const direct_l = ctx.createGain();
+  const direct_r = ctx.createGain();
+  direct_l.gain.value = 0.92;
+  direct_r.gain.value = 0.92;
+
+  input.connect(splitter);
+
+  splitter.connect(delay_l, 0);
+  delay_l.connect(direct_l);
+  direct_l.connect(merger, 0, 0);
+
+  splitter.connect(cross_r, 0);
+  cross_r.connect(merger, 0, 1);
+
+  splitter.connect(delay_r, 1);
+  delay_r.connect(direct_r);
+  direct_r.connect(merger, 0, 1);
+
+  splitter.connect(cross_l, 1);
+  cross_l.connect(merger, 0, 0);
+
+  const convolver = ctx.createConvolver();
+  convolver.buffer = gen_impulse(ctx);
+
+  const wet = ctx.createGain();
+  const dry = ctx.createGain();
+  wet.gain.value = 0.22;
+  dry.gain.value = 0.85;
+
+  merger.connect(dry);
+  merger.connect(convolver);
+  convolver.connect(wet);
+
+  dry.connect(output);
+  wet.connect(output);
+
+  _nodes = { input, output, splitter, merger, delay_l, delay_r, cross_l, cross_r, direct_l, direct_r, convolver, wet, dry };
+  return _nodes;
+}
+
+export function get_spatial_nodes(): SpatialNodes | null {
+  return _nodes;
+}
+
+export function is_spatial_enabled(): boolean {
+  return _enabled;
+}
+
+export function set_spatial_enabled(v: boolean) {
+  _enabled = v;
+}

src/pages/audio/index.tsx

@@ -4,31 +4,38 @@ import { Pitch } from "./pitch";
 import { Crossfade } from "./crossfade";
 import { c } from "@/theme";
 
+function HeaderToggle({ label, on, toggle }: { label: string; on: boolean; toggle: () => void }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <span style={{ fontSize: 12, color: c.w40 }}>{label}</span>
+      <button
+        onClick={toggle}
+        style={{
+          width: 36, height: 22, borderRadius: 11, position: "relative", flexShrink: 0,
+          background: on ? c.accent : c.w12,
+          transition: "background 0.2s",
+        }}
+      >
+        <div style={{
+          position: "absolute", top: 2, left: on ? 16 : 2,
+          width: 18, height: 18, borderRadius: "50%", background: c.white,
+          transition: "left 0.2s cubic-bezier(0.4,0,0.2,1)",
+          boxShadow: `0 1px 4px ${c.b40}`,
+        }} />
+      </button>
+    </div>
+  );
+}
+
 export function Audio() {
-  const { eq_enabled, set_eq_enabled } = use_settings();
+  const { eq_enabled, set_eq_enabled, spatial_audio, set_spatial_audio } = use_settings();
 
   return (
     <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
-      <div className="page-header" style={{ height: 52, display: "flex", alignItems: "center", padding: "0 24px", flexShrink: 0, borderBottom: `1px solid ${c.w07}`, gap: 12 }} data-tauri-drag-region>
+      <div className="page-header" style={{ height: 52, display: "flex", alignItems: "center", padding: "0 24px", flexShrink: 0, borderBottom: `1px solid ${c.w07}`, gap: 16 }} data-tauri-drag-region>
         <h1 style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.3px", color: c.text, flex: 1 }}>Audio</h1>
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <span style={{ fontSize: 12, color: c.w40 }}>Equalizer</span>
-          <button
-            onClick={() => set_eq_enabled(!eq_enabled)}
-            style={{
-              width: 36, height: 22, borderRadius: 11, position: "relative", flexShrink: 0,
-              background: eq_enabled ? c.accent : c.w12,
-              transition: "background 0.2s",
-            }}
-          >
-            <div style={{
-              position: "absolute", top: 2, left: eq_enabled ? 16 : 2,
-              width: 18, height: 18, borderRadius: "50%", background: c.white,
-              transition: "left 0.2s cubic-bezier(0.4,0,0.2,1)",
-              boxShadow: `0 1px 4px ${c.b40}`,
-            }} />
-          </button>
-        </div>
+        <HeaderToggle label="Spatial Audio" on={spatial_audio} toggle={() => set_spatial_audio(!spatial_audio)} />
+        <HeaderToggle label="Equalizer" on={eq_enabled} toggle={() => set_eq_enabled(!eq_enabled)} />
       </div>
 
       <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: "24px 28px 48px" }}>