A browser-based audio studio. Drop a track. The orb comes alive.
What It Does · Features · Tech Stack · Privacy · Get Started
Slo-Fi is a fully client-side audio processing app that runs entirely in the browser — no server, no uploads, no account. Drop any audio file and it gives you a real-time studio: slow the track down, shape the reverb, tune pitch and EQ, and watch a 3D WebGL orb react to every beat.
Built as a demonstration of what the Web Audio API and WebGL can do together at production quality. Everything processes on-device. Nothing touches a server.
| Playback Speed | 25%–170% with no pitch artifacts — tempo changes, key stays locked |
| Reverb Engine | True convolution reverb with adjustable mix, decay, and room size |
| 3-Band EQ | Low / mid / high shelf with ±12 dB range |
| Pitch Shift | ±12 semitones, fully independent of speed |
| Chorus + Saturation | Shimmer, width, and analog warmth |
| Key Detection | Chromagram analysis runs offline on load — all 12 roots, major/minor |
| BPM Detection | Real-time onset detection from the live FFT stream, updates with speed |
| Loop Region | Drag handles on the waveform to set in/out points with crossfade |
| 8D Audio | Binaural HRTF spatial processing — sound orbits your head |
| WAV Export | Download the fully processed, effected track |
| Presets | Lo-Fi · Vaporwave · Ambient · Hyperpop — each switches audio and visuals |
| PWA | Installs to home screen, works offline, lock screen media controls |
At the center of Slo-Fi is a 3D audio-reactive sphere built with Three.js and custom GLSL shaders. Bass pushes the geometry outward. Mid frequencies ripple the surface in layered simplex noise. Treble ignites a particle field. Every visual parameter — reactivity, glow, rotation, wireframe, particle count — is adjustable live.
| Layer | Technology |
|---|---|
| Language | TypeScript 5.x |
| Build | Vite 8.x |
| 3D / WebGL | Three.js r183 + custom GLSL shaders |
| Audio | Web Audio API — convolution reverb, analyser, BPM/key detection |
| Visuals | Post-processing bloom via EffectComposer, simplex noise displacement |
| Styling | Tailwind CSS v4 |
| Deployment | Cloudflare Pages |
| Self-hosting | Docker + nginx |
Audio never leaves the device.
Slo-Fi processes everything inside the browser using the Web Audio API. There is no backend receiving files, no analytics, no third-party scripts, no telemetry of any kind.
| Audio processed entirely on-device | ✅ |
| Zero network requests for audio data | ✅ |
| No accounts, no tracking, no telemetry | ✅ |
| All dependencies bundled — no CDN calls at runtime | ✅ |
| Audio cleared from memory on tab close | ✅ |
| Service worker caches app shell only — never audio | ✅ |
See SECURITY.md for the full architecture and responsible disclosure policy.
slofi.live — open it, drop a track, done. Works on any modern browser, no install required.
git clone https://github.com/gurvinny/Slo-Fi.git
cd Slo-Fi
npm install
npm run dev # dev server at localhost:5173
npm run build # production build
npm run preview # preview the build locallydocker compose up -d # builds and serves via nginxDetailed breakdown of the audio engine, shader pipeline, and PWA service worker in ARCHITECTURE.md.
See CONTRIBUTING.md for branch conventions, dev setup, and PR checklist.
MIT — see LICENSE.
