Step Sequencer Web Toy
A web-based FL-Studio-like step sequencer for drum samples.
As a little project just for run, I wanted to play with the new <audio> features available in browsers. Heavily inspired by Image-Line’s FL Studio’s channel rack, I put this together.
Browser engines and how they implement audio has changed a bit over time. It still works, but timing is quite wonky.
The tool comes with a set of freely available one-shot drum samples, and lets you add an arbitrary amount of channel strips. Each strip has a volume control, a mute toggle, a button to change the selected sample, a delete button, and a number of steps that can be activated or deactivated.
The tempo can be changed, as can the “time signature”, though my understanding of how time signatures work may not have been correct at the time.
Work Involved
- Designing pattern playback system
- Integrating with browser
AudioAPI - UI implementation for channel strips
- Design, CSS implementation
- Code documentation
- Implementing dialogs system with the help of jQuery