Building the S1-CK Sequencer: Hybrid Sync & Web Audio DSP

The S1-CK wasn't built to be another "toy" browser sequencer. The goal was to make a minimalist 8-bar producer tool that outputs track-ready low-end with zero server-side processing. Achieving this required solving two fundamental problems: precision clock management and silent offline rendering.

The Hybrid Sync Problem

A common pitfall in web-based sequencers is drift between the Audio Thread and the Main UI Thread. If you trigger oscillators inside a standard JavaScript setInterval, the groove will fall apart the moment the user scrolls or a background tab consumes CPU cycles.

In the S1-CK, we used a Hybrid Sync model. The core scheduling is handled by Tone.Transport, which hooks into the Web Audio API's high-precision hardware clock. However, to keep the UI reactive (the moving playhead and step indicators), we utilize Tone.Draw. This schedules UI updates to occur precisely at the same timestamp as the audio event, but handles the rendering on the next available animation frame.

// High-precision loop scheduling with UI sync
this.loop = new Tone.Loop((time) => {
  const step = Math.round(Tone.Transport.getTicksAtTime(time) / (Tone.Transport.PPQ / 4)) % totalSteps;
  
  // Audio: Triggered immediately via hardware clock
  kickEngine.trigger(time, stepData.vel);
  
  // UI: Scheduled to sync visually without blocking the audio thread
  Tone.Draw.schedule(() => {
    this.currentStep = step;
  }, time);
}, "16n").start(0);

The Sub-Bass Engine: Repurposing Uno

Rather than writing a new synth engine, we ported the Uno Synth DSP core into the S1-CK. The Uno engine utilizes a Moog-style 24dB ladder filter simulation—implemented as two 12dB BiquadFilterNodes in series—to achieve that distinctive resonant "growl" without digital clipping.

For the Kick, we moved away from sample-based playback in favor of a synthesised beat. A MembraneSynth provides the fundamental sine-sweep, which is then processed through a custom "Punch" chain: a subtle Distortion node followed by a Compressor with a fast attack (3ms) to emphasize the transient "knock" before the sub-tail takes over.

Silent Exports via OfflineContext

One of the more complex features was the "Bounce .WAV" functionality. Users expect a high-quality render, but they don't want to listen to the loop again in real-time while it exports.

This was solved by instantiating a second, silent OfflineAudioContext. When the user clicks "Bounce," the S1-CK recreates the entire engine state (Filter Cutoff, Kick Decay, Sequencer Steps) inside this virtual environment. The browser then "plays" the entire 8-bar loop in a fraction of a second—calculated entirely in RAM—and returns a raw AudioBuffer. This is then encoded into a 44.1kHz WAV file locally in the client's browser, ensuring no bandwidth cost for the Niebo Systems servers.

Conclusion: Minimalist Stability

The S1-CK is a testament to the fact that browser-based audio has matured. By respecting the hardware clock and isolating the DSP logic from the UI reactivity layer (Alpine.js), we've built a tool that is as stable as it is punchy. It’s a specialized piece of engineering for a specialized task: building a foundation for a track.