Dark Step

Dark Step is a powerful and intuitive web-based step sequencer built with Next.js and Tone.js. It offers a unique and engaging way to create music directly in your browser, featuring multiple instruments and a visually appealing interface.

Live Demo · Repo · Essay

I recently built a web-based step-sequencer using Tone.js, React.js, and Next.js . Here's a quick breakdown of its core features:

• A grid of 256 buttons, split into 16 steps and 16 notes, with 8 sections for each instrument.
• Four instruments: bass guitar, chord synth, bell synth (with oscillator and ADSR controls), and a drum kit (808 and live drums).
• A playable synth pad where mouse or touch movements control notes and cutoff frequency.
• A granular sampler allowing audio uploads with granular controls (speed, grain size, detune, etc.).
• A mixer with volume controls for each instrument and tempo adjustments.

Optimizing Timing and Scheduling

Initially, I used setInterval() to manage the sequencer clock, but the results were inconsistent, especially under CPU load. This led me to learn about the Web Audio API andTone.js, a library that takes out some of the grunt work with timing in the Web Audio API. Tone.js provided a much more reliable solution with its transport object, which allowed me to trigger notes in sync with the sequencer clock.

Even then, I faced issues with scheduling multiple notes at once, leading me to pre-schedule events using Tone.Part. This provided a more optimized way to handle complex arrangements without overloading the system, but introduced its own set of challenges.

Scheduling & State Management for Musical Instructions

One of the biggest challenges I faced was managing the state for each section and instrument, ensuring every note, time, and section toggle was stored and handled separately. Dynamically enabling or disabling sections impacted the timing and scheduling of musical events. For example, when toggling a section off, the same note objects had to be used to disable them due to tone.js’s "part" component requiring the memory address of JavaScript objects when scheduling notes. With many notes active in each section, this required intricate state management.

Additionally, maintaining accurate timing while switching sections on and off involved developing a system where notes were stored without specific measure information. When sections were activated or deactivated, I recalibrated the sequencer’s length, recalculated note timings, and regenerated time notations dynamically to ensure everything stayed in sync.

Final Thoughts

Managing state and ensuring the sequencer stayed responsive during dynamic changes in instrument sections was challenging. Future updates will focus on extending mixer features, optimizing mobile performance, and adding more effects. Despite the hurdles, Tone.js made many aspects of Web Audio development smoother.