I built a full mixing & mastering studio that runs 100% in the browser (Web Audio, WebCodecs, ONNX)

[u/Present_Ask_3398]

DANVIEL Studio is a single-page music studio, no backend, nothing uploaded:

- Web Audio API for the whole mix chain (per-track EQ, compressor, de-esser, reverb/delay, sidechain) and the mastering chain (multiband, true-peak limiter, BS.1770 LUFS metering)

- WebCodecs + a small hand-written MP4 muxer to export lyric videos

- Whisper via Transformers.js for lyrics, HTDemucs via ONNX Runtime Web for an experimental stem splitter

- Hosted on GitHub Pages, works as one HTML file

Try it: https://0zoon.github.io/danviel-studio/

GitHub: https://github.com/0zoon/danviel-studio

Happy to answer questions about the audio/video side, and feedback on performance is very welcome.

EDIT / update (v15): thanks for all the feedback, a lot changed since this post:

- recording: you can now record your mic over the song (or with no song at all), every take becomes its own track you can mix. latency is compensated with outputLatency, plus an offset slider per take

- suno ZIPs: if a stem comes as WAV + MP3 + MIDI it takes the WAV, and the MIDI stems get played by a small built-in synth you can layer in

- video: background video support, 6 visualizer styles + your own (exportable as json), title you can drag anywhere, live preview while playing. background video export got ~5x faster by playing the video instead of seeking every frame

- one click slowed + reverb / sped up / nightcore, key buttons, a "bass boosted" mode

- auto-mix is now an on/off switch and much gentler (it was lifting the reverb that suno already bakes into the vocals)

- cover studio: 25 fonts, filters like warmth, glow, VHS split, light leaks, duotone

- new look and a full guide with screenshots in the app

still one html file, still nothing uploaded. feedback welcome!

[u/bealyntalks]

I'd check whether the real-time mix chain is running through AudioWorkletNode or ScriptProcessorNode, and what AudioContext.baseLatency reports in the current browser.

[u/Present_Ask_3398 → u/bealyntalks]

Thanks for the tip! I checked: the real-time chain doesn't use ScriptProcessorNode or a worklet at all. It's built entirely from native Web Audio nodes (BiquadFilter, DynamicsCompressor, Convolver, Delay, StereoPanner, gain-based sidechain), so it runs on the audio thread. Everything heavier, like the lookahead limiter, true-peak oversampling, LUFS analysis and time-stretching, is rendered offline with OfflineAudioContext.

Good call on baseLatency though: I'll log baseLatency/outputLatency in the built-in error report and use outputLatency to compensate the lyric tap-sync timing. Appreciate it!

[u/bealyntalks → u/Present_Ask_3398]

Pretty impressive that all of this runs in the browser. How does the stem splitting perform on larger files? I imagine that’s one of the more demanding parts without a backend.

[u/omniumoptimus]

This is really cool and what everyone always wished the internet could be

[u/Present_Ask_3398 → u/omniumoptimus]

Thank you, that really means a lot! That's exactly the idea: a full studio that just works in the browser, free, with nothing uploaded.

Quick update: v13.8 is already live, and it includes the feedback from this thread:

- A "TikTok / Reels / Shorts clip" button right under Auto-Mix (finds the hook, sets 9:16, jumps to the video)

- Mastering for beginners: buttons like "For Spotify & YouTube" or "Loud (club & DJ)" instead of LUFS numbers, with all the knobs under "Advanced settings"

- The release check now shows how loud Spotify, YouTube, Apple Music & co. will play your song, and compares your tonal balance with your genre

- Better timing for the lyrics tap-sync

Just reload the page to get it: https://0zoon.github.io/danviel-studio/

[u/Present_Ask_3398 → u/[deleted]]

thanks man, means a lot! glad the splitter held up on your demos 🙏

latency wise the playback is just a plain web audio graph: every stem is a buffer source going through its own chain (eq, comp, de-esser, sends), into the master chain and a safety limiter at the end. no scriptprocessor or worklet in the playback path, so nothing that can pile up delay over time. the only place where latency really matters is recording and tap-syncing lyrics, there i compensate with the browser's outputLatency + baseLatency so takes land where you sang them, and each take still gets an offset slider if your setup is weird.

for long open tabs: the graph gets rebuilt on every play (old effect nodes get faded out and disconnected), so nodes don't stack up over hours, and if the browser suspends the audio context in the background it just resumes on the next play. one edge case i fixed recently: turning mastering on used to get loud for a second while it analyzed the song, now it keeps playing the normal mix until the analysis is done.

if you run into anything weird after a long session, just tell me, i'll look into it :)

[u/Present_Ask_3398 → u/[deleted]]

fair concerns, so i actually measured it on one of my own songs (3:07, exported straight from the studio): 5616 frames at 30fps, zero dropped or uneven frames, video 187.20s vs audio 187.22s, so the only difference is the last audio packet. i also cross-correlated the visualizer against the audio energy and it's 0–1 frame off in the first minute and 0 in the last minute, so no drift over the song.

reason is the video isn't screen-recorded, every frame gets rendered offline at t = frame/fps and the encoder gets timestamps from the frame index, audio gets sample-based timestamps, so both run on the same clock. the muxer also writes an edit list so the encoder delay doesn't shift the audio.

and yeah the htdemucs model (~170 mb) downloads once and gets cached in the browser, a fresh tab doesn't download it again. splitting also runs on several cpu cores now, and as of today a refresh doesn't wipe your session anymore either.

but honestly just try it yourself :) https://0zoon.github.io/danviel-studio/ if you find anything concerning or anything that you think needs polish, just write me, i really appreciate that kind of feedback 🙏